淡入淡出轮播图
*{
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);
})
