html 淡出淡入轮播图,淡入淡出轮播图

轮播图淡入淡出效果   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. 1
2. 2
3. 3
4. 4
5. 5
6. 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)

})