基于jQuery实现淡入淡出效果轮播图

<div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></li> <li><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></li> <li><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></li> </ul> <ul id="position"> <li class="cur"></li> <li class=""></li> <li class=""></li> </ul> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>

*{  margin: 0; padding: 0;  text-decoration: none; } ul{ list-style: none; } #container{ position: relative; width: 400px; height: 200px; margin: 20px auto; }  .pic li { position: absolute; top: 0; left: 0; display: none; } .pic li img { width: 400px; height: 200px; } #position{ position: absolute; bottom: 0; right:0; margin: 0; background: #000; opacity: 0.4; width: 400px; text-align: center; } #position li{ width: 10px; height: 10px; margin:0 2px; display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; background-color: #afafaf; } #position .cur{ background-color: #ff0000; } .arrow {  cursor: pointer; display: none;  line-height: 39px;  text-align: center;  font-size: 36px;  font-weight: bold;  width: 40px;  height: 40px;  position: absolute;  z-index: 2;  top: 50%; margin-top: -20px; /*width的一半*/ background-color: RGBA(0,0,0,.3);  color: #fff; } .arrow:hover {  background-color: RGBA(0,0,0,.7); } #container:hover .arrow {  display: block; } #prev {  left: 20px; } #next {  right: 20px; }

$(function(){ //第一张显示 $(".pic li").eq(0).show(); //鼠标滑过手动切换，淡入淡出 $("#position li").mouseover(function() { $(this).addClass('cur').siblings().removeClass("cur"); var index = $(this).index(); i = index;//不加这句有个bug，鼠标移出小圆点后，自动轮播不是小圆点的后一个 // $(".pic li").eq(index).show().siblings().hide(); $(".pic li").eq(index).fadeIn(500).siblings().fadeOut(500); }); //自动轮播 var i=0; var timer=setInterval(play,2000); //向右切换 var play=function(){ i++; i = i > 2 ? 0 : i ; $("#position li").eq(i).addClass('cur').siblings().removeClass("cur"); $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500); } //向左切换 var playLeft=function(){ i--; i = i < 0 ? 2 : i ; $("#position li").eq(i).addClass('cur').siblings().removeClass("cur"); $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500); } //鼠标移入移出效果 $("#container").hover(function() { clearInterval(timer); }, function() { timer=setInterval(play,2000); }); //左右点击切换 $("#prev").click(function(){ playLeft(); }) $("#next").click(function(){ play(); }) })