js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS广告代码 > JS幻灯片

jquery实现电子商城网站全屏多张图片滑动切换特效

发布时间:2015-09-09 23:30:30    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现电子商城网站全屏多张图片滑动切换特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
		<meta name="viewport" content="width=device-width, initial-scale=1">    
		<title>jquery实现电子商城网站全屏多张图片滑动切换特效</title>    
		<meta name="keywords" content="jquery特效,图片切换,全屏轮播图,图片滑动" />    
		<link rel="stylesheet" type="text/css" href="css/slide.css"/>    
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>    
		<script type="text/javascript" src="js/slide.js"></script>    
		<script type="text/javascript">    
			$(document).ready(function() {    
				$(".slideInner").slide({    
					slideContainer: $('.slideInner a'),    
					effect: 'easeOutCirc',    
					autoRunTime: 5000,    
					slideSpeed: 1000,    
					nav: true,    
					autoRun: true,    
					prevBtn: $('a.prev'),    
					nextBtn: $('a.next')    
				});    
			});    
		</script>    
	</head>    
	<body>    
		<div class="slides">    
			<div class="slideInner">    
				<a href="#" style="background: url(img/slide1.jpg) no-repeat;">    
					<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide1p1.png" /> </div>    
					<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="img/slide1p2.png" /> </div>    
				</a>    
				<a href="#" style="background: url(img/slide2.jpg) no-repeat">    
					<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide2p1.png" /> </div>    
				</a>    
				<a href="#" class="slide3" style="background: url(img/slide3.jpg) no-repeat;">    
					<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide3p1.png" /> </div>    
					<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="img/slide3p2.png" /> </div>    
					<div class="moveElem img3" rel="300,easeInOutExpo"> <img src="img/slide3p3.png" /> </div>    
				</a>    
				<a href="#" style="background: rgb(113, 209, 231);">    
					<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide1p1.png" /> </div>    
					<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="img/slide1p2.png" /> </div>    
				</a>    
				<a href="#" style="background: rgb(178, 44, 44);">    
					<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="img/slide1p1.png" /> </div>    
					<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="img/slide1p2.png" /> </div>    
				</a>    
			</div>    
			<div class="nav">    
				<a class="prev" href="javascript:;"></a>    
				<a class="next" href="javascript:;"></a>    
			</div>    
		</div>    
	</body>    
</html>



图片切换 全屏轮播图 图片滑动

jquery实现led广告牌旋转图片切换特效

jquery焦点选项卡图片切换特效,支持自动播放

jquery实现4款自定义图片切换幻灯片js特效

js myfocus焦点图插件,实现24种焦点图片切换特效

jquery+html5自适应屏幕宽度网站焦点图片切换特效

jquery实现网站响应式图片切换特效

jquery实现带爆炸动画图片切换特效

css3图片切换类似滤镜百叶窗图片切换特效

jQuery实现图片从下往上滑动切换效果_js图片切换特效代码

jQuery带缩略图的全屏幻灯片图片切换特效代码

jQuery右侧动态缩放图片切换特效

jquery仿京东商城首页图片切换特效代码

jQuery全屏3D旋转木马图片切换特效

jQuery实现平滑缩放图片切换幻灯片特效代码

jQuery仿腾讯qq空间图片相册遮罩层图片切换特效代码

jQuery 实现3D堆叠式图片切换特效代码