html多图轮播淡入淡出js,原生js淡入淡出轮播图

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

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

图片轮播 js原生(淡入淡出)

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

imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组

imgLen = imgArr.length,

infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组

indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组

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

var autoChange = setInterval(function(){

if(curIndex

curIndex ++;

}else{

curIndex=0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

//调用添加事件处理

addEvent();

//给右下角的图片index添加事件处理

function addEvent(){

for(vari=0;i

//闭包防止作用域内活动对象item的影响

(function(_i){

//鼠标滑过则清除定时器，并作变换处理

indexArr[_i].οnmοuseοver=function(){

clearTimeout(autoChange);

changeTo(_i);

curIndex=_i;

};

//鼠标滑出则重置定时器处理

indexArr[_i].οnmοuseοut=function(){

autoChange=setInterval(function(){

if(curIndex < imgLen -1){

curIndex ++;

}else{

curIndex=0;

}

//调用变换处理函数

changeTo(curIndex);

},2500);

};

})(i);

}

}

//变换处理函数

function changeTo(num){

//设置image

varcurImg=getElementsByClassName("imgOn")[0];

fadeOut(curImg); //淡出当前 image

removeClass(curImg,"imgOn");

addClass(imgArr[num],"imgOn");

fadeIn(imgArr[num]); //淡入目标 image

//设置image 的 info

varcurInfo=getElementsByClassName("infoOn")[0];

removeClass(curInfo,"infoOn");

addClass(infoArr[num],"infoOn");

//设置image的控制下标 index

var_curIndex=getElementsByClassName("indexOn")[0];

removeClass(_curIndex,"indexOn");

addClass(indexArr[num],"indexOn");

}

//设置透明度

function setOpacity(elem,level){

if(elem.filters){

elem.style.filter="alpha(opacity="+level+")";

}else{

elem.style.opacity=level/ 100;

}

}

//淡入处理函数

function fadeIn(elem){

setOpacity(elem,0); //初始全透明

for(vari=0;i<=20;i++){ //透明度改变 20 *5=100

(function(){

varlevel=i* 5;  //透明度每次变化值

setTimeout(function(){

setOpacity(elem, level)

},i*25); //i * 25 即为每次改变透明度的时间间隔，自行设定

})(i);    //每次循环变化一次

}

}

//淡出处理函数

function fadeOut(elem){

for(vari=0;i<=20;i++){ //透明度改变 20 *5=100

(function(){

varlevel=100- i * 5; //透明度每次变化值

setTimeout(function(){

setOpacity(elem, level)

},i*25); //i * 25 即为每次改变透明度的时间间隔，自行设定

})(i);    //每次循环变化一次

}

}

//通过class获取节点

function getElementsByClassName(className){

var classArr = [];

vartags=document.getElementsByTagName('*');

for(var item in tags){

if(tags[item].nodeType == 1){

if(tags[item].getAttribute('class') == className){

classArr.push(tags[item]);

}

}

}

return classArr; //返回

}

// 判断obj是否有此class

function hasClass(obj,cls){  //class位于单词边界

return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));

}

//给 obj添加class

function addClass(obj,cls){

if(!this.hasClass(obj,cls)){

obj.className += cls;

}

}

//移除obj对应的class

function removeClass(obj,cls){

if(hasClass(obj,cls)){

varreg=newRegExp('(\\s|^)' + cls + '(\\s|$)');

obj.className= obj.className.replace(reg,'');

}

}