jquery幻灯片更新版

1、html部分

<div class="carousel" id="carousel">
				<ul>
						<li>
						<a href="javascript:void(0)">
							<img src="images/ads/2.jpg">
						</a>
						</li>
						<li>
						<a href="javascript:void(0)">
							<img src="images/ads/4.jpg">
						</a>
						</li>
						<li>
						<a href="javascript:void(0)">
							<img src="images/ads/1.jpg">
						</a>
						</li>
						<li>
						<a href="javascript:void(0)">
							<img src="images/ads/3.jpg">
						</a>
						</li>
					<ul class="clearfix imgindex" id="imgindex">
						<li class="chos">
						<a href="javascript:void(0)">
							<em>相约情节人</em>
							<em>全场119元起</em>
						</a>
						</li>
						<li>
						<a href="javascript:void(0)">
							<em>春季新品发布</em>
							<em>全场4.1折起</em>
						</a>
						</li>
						<li>
						<a href="javascript:void(0)">
							<em>新款上线</em>
							<em>全场357元起</em>
						</a>
						</li>
						<li>
						<a href="javascript:void(0)">
							<em>愤怒小鸟特卖</em>
							<em>全场89元</em>
						</a>
						</li>
					</ul>
				</ul>
				</div>

2、css部分

.mainright .carousel {
 	width: 550px;
 	height: 100%;
}
.carousel ul {
	position: relative;
	width: 100%;
	height: 100%;
}
.carousel>ul>li {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   z-index: 5;
   display:  none;
}
.carousel>ul>li:first-child {
 	display:  block;
}
.carousel>ul li img {
	display: block;
	height: 100%;
	width: 100%;
}
.carousel>ul li a {
	display: block;
	height: 100%;
}
.carousel  ul.imgindex {
	position: absolute;
	height: 16%;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 10;

}
.carousel  ul.imgindex li {
	width: 135.9px;
	height: 100%;
	border: 1px solid #333;
	background: rgba(0,0,0,0.5);
	filter: alpha(opacity=50);
	float: left;
	padding: 5px 10px;
	margin-left: 2px;
}
.carousel  ul.imgindex li:first-child {
	margin-left: 0;
}
.carousel  ul.imgindex li.chos {
	background: #37A7D7 url(../images/adindex.gif) center bottom no-repeat;
	opacity: 1;
	filter: alpha(opacity=100);

}
.carousel .imgindex li>a {
	color: #fff;
	text-decoration: none;
}
.imgindex li>a em {
	display: block;
	text-align: center;

} 

3、jquery部分

<pre name="code" class="javascript">var curIndex=0,times=null;
$(function(){
var  $target=$("#carousel"),liLength=$("#imgindex li").length;
      $target.hover(function(){
            clearInterval(times);
      },function(){
          times=setInterval(function(){
              console.log("length:"+liLength);
              showImgs(curIndex);
              //$target.find("li").eq(curIndex).stop(true,true).fadeIn().siblings("li").fadeOut();
              console.log(curIndex+"one");
              curIndex++;
              if(curIndex==liLength){
                  curIndex=0;
              }
              console.log(curIndex+"two");
          },3000);
      }).trigger("mouseleave");/*默认触发一次鼠标离开的事件*/
$("#imgindex li").click(function(){//点击div说明文字显示相应的图片
    curIndex=$(this).index();
    showImgs(curIndex);
});
function showImgs(index){
    $target.find("li").eq(index).stop().fadeIn().siblings("li").fadeOut();
    $("#imgindex").find("li").eq(index).addClass("chos").siblings().removeClass("chos");
}