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");
}