轮播图淡入淡出效果 jquery
css
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
.wrapper{
670px;
height: 240px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ul{
position:relative;
}
ul li{
position:absolute;
top:0;
left:0;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
190px;
}
ol li{
float: left;
20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: default;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
html
- 1
- 2
- 3
- 4
- 5
- 6
js
var index = 0;
var timer = null;
var list = $("ul li");
var pages = $("ol li");
timer = setInterval(autoPaly,4000)
function autoPaly(){
index++;
if(index == pages.length){
index = 0;
}
pages.eq(index).addClass("current").siblings().removeClass("current");
list.eq(index).fadeIn(1000).siblings().fadeOut(1000);
// fadeIn 淡入效果 速度1秒
}
pages.mouseenter(function(){
clearInterval(timer);
index = $(this).index()-1;
autoPaly();
})
pages.mouseleave(function(){
timer = setInterval(autoPaly,4000)
})