淡入淡出轮播图

轮播图淡入淡出效果   jquery

css

<style>
	*{margin: 0;padding: 0;}
	ul,ol{ list-style: none;}
	.wrapper{
		width: 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;
		width: 190px;
	}
	ol li{
		float: left;
		width: 20px;
		height: 20px;
		margin: 0 5px;
		text-align: center;
		border-radius: 50%;
		cursor: default;
		background-color: #abc;
	}
	ol li.current{
		background-color: pink;
	}
</style>

　　html

    <div class="wrapper">
        <ul>
            <li style="z-index: 6;"><img src="images/1.jpg" alt=""/></li>
            <li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>
            <li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>
            <li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>
            <li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>
            <li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>
        </ul>
        <ol style="z-index: 10;">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>

　　js

<script>
	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)
	})
</script>