jquery实现的幻灯片效果 问题

寓言china 2013-08-04 03:16:53
是这样的效果 天猫商城首页的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;
}
...全文
92 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿鱼 2013-08-04
  • 打赏
  • 举报
回复
(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)作为一个焦点图来讲,楼主代码显得有些简陋,建议先看下一些比较好的源码,大概知道原理后再试着自己编写,这样效率比较高一些。

87,992

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧