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

淡入淡出轮播图

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

}

.re{

position: relative;

}

.ab{

position: absolute;

}

.outerContaner.innerContaner{

width: 100%;

overflow: hidden;

min-width: 1200px;

}

.imgContaner{

top: 0;

left: 0;

width: 100%;

min-width: 1200px;

}

.imgContaner img{

width: 100%;

}

// 虚构一个图片地址json数据

var data=[{imgurl:'img/banner3.jpg'},{imgurl:'img/banner2.png'},{imgurl:'img/banner.png'}];

// 找到li的父元素ul

var contaner=$('.innerContaner');

// 获取图片数量，即data数组长度

var imgNum=data.length;

// 遍历渲染图片

for(var i=0;i

contaner.append('

')

}

// 找到所有的图片父盒子，即li

var boxLis=$('.imgContaner');

// 利用定时器控制图片轮播

// 此flag，判断正在轮播第几张图

var img_flag=0;

var timer;

clearInterval(timer);

timer=setInterval(function(){

boxLis.eq(img_flag).fadeIn(1500).siblings('li').fadeOut(1500)

if (img_flag

img_flag++;

}else{

img_flag=0;

}

},3000);

contaner.on('mouseenter',function(){

// 鼠标移入到轮播图区域，停止轮播

clearInterval(timer);

}).on('mouseleave',function(){

// 鼠标移除时候，继续轮播

timer=setInterval(function(){

boxLis.eq(img_flag).fadeIn(1500).siblings('li').fadeOut(1500)

if (img_flag

img_flag++;

}else{

img_flag=0;

}

},3000);

})