淡入淡出轮播图

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

图片轮播 jq(淡入淡出)

body,div,ul,li,a,img{margin: 0;padding: 0;}

ul,li{list-style: none;}

a{text-decoration: none;}

.wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

.banner{width: 400px;height: 200px;overflow: hidden;}

.imgList{width:400px;height:200px;z-index: 10;}

.imgList li{display: none;}

.imgList .imgOn{display: inline;}

.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}

.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

.infoList li{display: none;}

.infoList .infoOn{display: inline;color: white;}

.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

.indexList .indexOn{background: red;font-weight: bold;color: white;}

puss in boots1

puss in boots2

puss in boots3

puss in boots4

puss in boots5

1

2

3

4

5

var curIndex = 0; //当前index

//  alert(imgLen);

// 定时器自动变换2.5秒每次

var autoChange = setInterval(function(){

if(curIndex < $(".imgList li").length-1){

curIndex ++;

}else{

curIndex = 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

$(".indexList").find("li").each(function(item){

$(this).hover(function(){

clearInterval(autoChange);

changeTo(item);

curIndex = item;

},function(){

autoChange = setInterval(function(){

if(curIndex < $(".imgList li").length-1){

curIndex ++;

}else{

curIndex = 0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

});

});

function changeTo(num){

$(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");

$(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");

$(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

}