焦点图效果 【jquery】

/*====焦点图效果*/


$(function() {


var len = $("#playbtn > li").length;


var index = 0;


var adTimer;


$("#playbtn li").mouseover(function() {


index = $("#playbtn li").index(this);


showImg(index);


}).eq(0).mouseover();


//滑入 停止动画，滑出开始动画.


$('#play').hover(function() {


clearInterval(adTimer);


}, function() {


adTimer = setInterval(function() {


showImg(index)


index++;


if (index == len) {
index = 0;
}


}, 3000);


}).trigger("mouseleave");


});


function showImg(index) {


var adHeight = $("#play").height();
// 通过控制top ，来显示不同的幻灯片


$("#playimg").stop(true, false).animate({
top: -adHeight * index
}, 1000);


$("#playbtn li").removeClass("current").eq(index).addClass("current");

}

<div class="bannerbig">
<div id="play">
<ul id="playimg">
<li>
<img src="images/01.jpg" />
</li>
<li>
<img src="images/02.jpg" />
</li>
<li>
<img src="images/03.jpg" />
</li>
<li>
<img src="images/04.jpg" />
</li>
<li>
<img src="images/05.jpg" />
</li>
<li>
<img src="images/06.jpg" />
</li>
</ul>
<ul id="playbtn">
<li class="current">
<img src="images/small_banner01.jpg" width="78" height="43" />
</li>
<li>
<img src="images/small_banner01.jpg" width="78" height="43" />
</li>
<li>
<img src="images/small_banner02.jpg" width="78" height="43" />
</li>
<li>
<img src="images/small_banner03.jpg" width="78" height="43" />
</li>
<li>
<img src="images/small_banner01.jpg" width="78" height="43" />
</li>
<li>
<img src="images/small_banner01.jpg" width="78" height="43" />
</li>
</ul>
</div>
</div>

.bannerbig{ position:relative; z-index: 0; min-height:450px; clear:both;  overflow-y: hidden;}
/*====轮播图[banner]====*/
#play { width:100%;height:450px; margin-top:-1px; position:absolute;left:0px; top:0px; overflow:hidden;display:inline;}
#playimg { width:100%;height:450px; position:absolute; border-top:1px #3e4e7a solid;}
#playimg li { height:450px;overflow:hidden;}
#playimg img { clip:rect(0px 1400px 450 0px); width:100%; margin:0 auto; height:auto;}
#playbtn { position:absolute;left:50%; margin-left:-250px; bottom:4%;}
#playbtn li { float:left; padding:3px; border:1px #666 solid;margin:0 3px;cursor:pointer;}
#playbtn .current { color:#3e4e7a; border:1px #a8a8a8 solid; box-shadow:1px 1px 1px #3e4e7a; transition:all .3s; background:rgba(255,255,255,0.4);}
.i_fg_line{ width:100%; background-color:#fff; height:13px; margin-top:300px; margin-bottom:10px;}