jquery实现的幻灯片效果 问题

Question

是这样的效果 天猫商城首页的banner幻灯片效果 我现在有一个问题 就是鼠标放上.chenck这个ul上面没有任何并不能显示线对应的图片，求解 还有就是  var lis=$(".opcity li").hide();
    var i=0;
$(".chenck li").mouseenter(function(){
         var z=$(this).index();
        $(this).addClass("bianhua").siblings().removeClass("bianhua");  这一块也没有变化 不能换图片
lis.eq(z).show().siblings().hide();   
      });   
    function loop(){
        if(i >= lis.length){
            i=0;
        }
        lis.not(lis.eq(i).fadeToggle(1000,function(){
        })).hide();
        i++;
    }
    loop();
    setInterval(loop,4000);
<div class="banner">
   <ul  class="opcity"  style="list-style-type:none;">
      <li><img src="images/banner_01.jpg" alt=""></li>
  <li><img src="images/banner_01.jpg" alt=""></li>
    <li> <img src="images/banner_01.jpg" alt=""></li>
       <li><img src="images/banner_01.jpg" alt=""> </li>
   </ul>
     <ul class="chenck"><li></li><li></li><li></li><li></li><li></li></ul>
</div>
.banner .chenck{
list-style-type:none;
position:absolute;
width: 300px;
height: 50px;
z-index: 8888888888;
top: 363px;
left: 50%;
}
.bianhua{
  background: url(../images/pages.png) no-repeat scroll 0 0 transparent;
}
.banner .chenck  li{
 background: url(../images/page2.png) no-repeat;
width: 14px;
float: left;
height: 14px;
margin: 0 3px;
cursor: pointer;
}

Answer 1

(1)首先一个小问题：.chenck里面的li和图片个数不等。
(2)其次，你这段代码是能够执行的，划过.chenck中的li是能显示不同图片的。但效果很明显不是平滑的效果而且有问题，问题就在于setInterval和你的mouseenter冲突了，你应该把setInterval(loop,4000)赋给你一个变量，然后在mouseenter的函数中取消这个变量（也就是取消setInterval(loop,4000)）。具体到你的代码中就是： var lis=$(".opcity li").hide();
    var i=0;
    $(".chenck li").mouseenter(function(){
         var z=$(this).index();
        $(this).addClass("bianhua").siblings().removeClass("bianhua");  这一块也没有变化 不能换图片
        lis.eq(z).show().siblings().hide();   
      });   
    function loop(){
        if(i >= lis.length){
            i=0;
        }
        clearInterval(auto);//在显示图片之前取消设定的自动播放的动画
        lis.not(lis.eq(i).fadeToggle(1000,function(){
        })).hide();
        i++;
    }
    loop();
   var auto=setInterval(loop,4000);//将设定的自动播放赋给变量auto(3)作为一个焦点图来讲，楼主代码显得有些简陋，建议先看下一些比较好的源码，大概知道原理后再试着自己编写，这样效率比较高一些。