jQuery带缩略图图片左右滑动切换滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带缩略图图片左右滑动切换滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
<title>jQuery带缩略图图片左右滑动切换</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div class="play" id="play">
	<a href="javascript:" id="next">>><div class="nextImg"><img width="80" height="54" src="" /></div></a>
	<a href="javascript:" id="prev"><<<div class="prevImg"><img width="80" height="54" src="" /></div></a>
	<ol></ol>
	<ul>
		<li><a href="#"><img src="images/1.jpg" alt="标题1" /></a></li>
		<li><a href="#"><img src="images/2.jpg" alt="标题2" /></a></li>
		<li><a href="#"><img src="images/3.jpg" alt="标题3" /></a></li>
	</ul>
</div>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	var oDiv = $("#play");  //外部盒子
	var count = $("#play ul li").length;  //内部图片数量
	var countwidth = $("#play ul li").width();  //图片边框宽度
	var oUl = $("#play ul").css("width",count*countwidth);  //ul li总宽度
	var now = 0;
	var next = $("#next");
	var prev = $("#prev");
	//点击按钮数量
	for(var i = 0; i < count; i++){
		$("#play ol").append("<li>" + Number(i+1) + "</li>");
		$("#play ol li:first").addClass("active");
	}
	//左右点击图片获取
	var nI = $("#play ul li:nth-child(2)").find("img").attr("src");
	$(".nextImg img").attr("src",nI);
	var pI = $("#play ul li:last-child").find("img").attr("src");
	$(".prevImg img").attr("src",pI);
	//按钮点击事件
	var aBtn = $("#play ol li");
	aBtn.each(function(index){
		$(this).click(function(){
			clearInterval(timer);
			tab(index);
			nextImg();
			prevImg();
			timer=setInterval(autoRun,2000);
		});
	});
	//图片循环事件
	function tab(index){
		now = index;
		aBtn.removeClass("active");
		aBtn.eq(index).addClass("active");
		oUl.stop(true,false).animate({"left":-countwidth * now},400);
	}
	//下一张按钮图片切换
	function nextImg(){
		var d = $("#play ul li").find("img").eq(now+1).attr("src");
		var nI = $("#play ul li:nth-child(1)").find("img").attr("src");
		$(".nextImg").find("img").attr("src",d);
		if(now==count-1){
			$(".nextImg").find("img").attr("src",nI);
		}
	}
	//上一张图片按钮切换
	function prevImg(){
		var f = $("#play ul li").find("img").eq(now-1).attr("src");
		$(".prevImg").find("img").attr("src",f);
	}
	
	//下一张点击事件
	next.click(function(){
		clearInterval(timer);
		now++;
		if(now==count){
			now=0;
		}
		tab(now);
		nextImg();
		prevImg();
		timer=setInterval(autoRun, 2000);
	});
	//上一张点击事件
	prev.click(function(){
		clearInterval(timer);
		now--;
		if(now==-1){
			now=count-1;
		}
		tab(now);
		nextImg();
		prevImg();
		timer=setInterval(autoRun, 2000);
	});
	//自动轮播定义
	function autoRun(){
		now++;
		if(now==count){
			now=0;
		}
		tab(now);
		nextImg();
		prevImg();
	};
	var timer=setInterval(autoRun, 2000);
});
</script>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";*{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
body{background:#333;}
/* play */
.play{width:700px;height:420px;overflow:hidden;position:relative;margin:40px auto 0;}
.play .text{width:100%;position:absolute;left:0;bottom:0;height:60px;}
.play .text div{position:absolute;left:0;top:0;width:100%;height:100%;background:black;filter:alpha(opacity:40);opacity:0.4;z-index:99;}
.play .text span{position:absolute;left:0;top:0;width:100%;height:100%;line-height:60px;color:white;z-index:999;text-align:center;font-size:20px;}
.play ol{position:absolute;left:50%;margin-left:-20px;bottom:10px;z-index:99999;}
.play ol li{float:left;margin-right:3px;display:inline;cursor:pointer;background-color:rgba(0,0,0,0.5);padding:5px 9px;color:#fff;font-family:arial;font-size:12px;border-radius:100px;}
.play ol li.active{font-weight:bold;color:#ffffff;background-color:rgba(0,0,0,1);position:relative;}
.play ul{position:absolute;top:0;left:0;z-index:1;}
.play ul li{width:700px;height:420px;float:left;}
.play ul img{float:left;width:700px;height:420px;}
#next{display:block;position:absolute;top:38%;right:0;width:30px;height:54px;text-align:center;color:#fff;background-color:rgba(0,0,0,0.5);z-index:999;line-height:50px;text-decoration:none;}
#prev{display:block;position:absolute;top:38%;left:0;width:30px;height:54px;text-align:center;color:#fff;background-color:rgba(0,0,0,0.5);z-index:999;line-height:50px;text-decoration:none;}
#prev:hover .prevImg,#next:hover .nextImg{display:block;}
.prevImg{height:54px;width:80px;position:absolute;background-color:#fff;top:0;left:30px;display:none;}
.nextImg{height:54px;width:80px;position:absolute;background-color:#fff;top:0;right:30px;display:none;}

附件:下载该文件资源,减少时间成本(增值服务)