[原创] 简单实现带缩略图的jQuery slides

简单实现带缩略图的jQuery幻灯片效果(可自动播放)

有图有真相：

代码如下:

JS

var n,interval=null;					//	n:指定 或 标记当前播放的图片
function time(index) {	
	n = index;
	interval = setInterval("play()", 2000); 
}

function play(){		
	var count = $(".v_con > span").length;
	n ++ ;
	if(n > count){
		n = 0;
	}
	$(".v_con > span img").removeClass("cur");
	$(".v_con > span img").eq(n).addClass("cur");
	
	var src = $(".v_con > span img").eq(n).attr("src");
	$(".max_img > img").attr("src",src).fadeIn(1500);
}

$(function(){
	time(0);	//	调用time()，默认从第一个图片开始自动播放
	$(".v_con > span").hover(function(){
		n=$(".v_con > span").index($(this))-1;	//	得到当前图片的索引
		play();		//	展示当前图片
		if(interval){
			clearInterval(interval); 
		} 
	},function(){
		time(n);	//	从当前图片 继续 播放
	});
});

Html

<div class="container" style="margin:0 auto; margin-left:auto;margin-right:auto;">
			<div class="slide">
				<ul>
					<!--显示大图-->
					<li class="max_img">
						<img width="480" height="275" src="http://www.cnblogs.com/http://www.cnblogs.com/Public/images/data/01.jpg" />
					</li>
				</ul>
				<div class="thumbnail">
					<!--缩略图-->
					<!--span class="prev" >上一页</span-->
					<div class="v_show">
						<div class="v_con">
							<span >
								<img class="cur" width="95" height="70" src="http://www.cnblogs.com/http://www.cnblogs.com/Public/images/data/01.jpg" />
							</span>
							<span>
								<img width="95" height="70" src="http://www.cnblogs.com/http://www.cnblogs.com/Public/images/data/02.jpg" />
							</span>
							<span>
								<img width="95" height="70" src="http://www.cnblogs.com/http://www.cnblogs.com/Public/images/data/05.jpg" />
							</span>
							<span>
								<img width="95" height="70" src="http://www.cnblogs.com/http://www.cnblogs.com/Public/images/data/02.jpg" />
							</span>
						</div>
					</div>
					<!--span class="next">下一页</span-->
				</div><!--thumbnail end-->
			</div>
		</div>

CSS

/* style */
.container {width:552px;height:304px; margin:0 auto; }

.slide { width:550px;height:auto;border:1px dotted #CCC; padding:10px; text-align:left;background:url("../images/slide/bg.jpg") repeat-x;}
.slide ul li{border:1px solid #CCC;padding:10px;background:#FFF;text-align:center;}
.slide ul li img{border:1px solid #EEE;}

.thumbnail{height:110px;margin-top:10px;}
/*
.prev,.next {text-indent:-9999px; cursor:pointer;display:block;width:24px;height:110px;float:left; }
.prev{background:url("../images/slide/bg_l_1.gif") no-repeat;}
.next{background:url("../images/slide/bg_r_1.gif") no-repeat;}
*/
.v_show{height:110px;width:480px;float:left;background:url("../images/slide/bg_c.gif") repeat-x 0 -1px;overflow:hidden; position:relative;padding-left:15px; }
.v_show .v_con{width:2500px;text-align:left;position:absolute;left:7px; bottom:10px;}
.v_show span{display:inline-block;width:120px;height:76px;margin-top:16px 0 0; cursor:pointer; text-align:center; background:#EEE;text-align:center; }
.v_show span img{padding:3px; border:1px solid #CCC;background:#FFF; }
.v_show span img:hover,.v_show span img.cur{border:border:1px solid #FFF;background:#e80000;}