javascript - 请问我这样用jq写的轮播图 淡入淡出的切换效果为什么没用啊 而且自动轮播也有问题
黄舟
黄舟 2017-04-11 12:03:33
[JavaScript讨论组]

我这个轮播图是用jq的数组来做的,但是切换效果时我想要的是前一个图片淡出然后后一个图片淡入,可我这样的方法只能先切换图片然后再淡出淡入一下后面的切换的那一个图片(对只是一张图淡入淡出)不知道要怎么弄啊,还有我这计时器要自动轮播可是点进去后并不会 但是点解右边的按钮的时候 图片就自动轮播了 然后移入图片才会停止计时器 然后接下来又把鼠标移出图片才会不点击按钮才会自动播放啊 然而我要移出图片范围自动轮播该怎么搞啊

$(function (){

  $("ul.xialadaohang li.beijin").mouseenter(function(){
$(this).find("p.beij").stop(false, true).fadeIn(500);

});

  $("ul.xialadaohang li.beijin").mouseleave(function(){
$(this).find("p.beij").stop(false, true).fadeOut(500);//stop防止快速多次划过p 在还没执行一个动画连续重复执行动画

});

  $(".touxiang:first").mouseenter(function(){
      $(this).stop(false, true).animate({top:"-1px"},300);
  })
  $(".touxiang:first").mouseleave(function(){
      $(this).stop(false, true).animate({top:"10px"},300);
  })
  
 var imgs = new Array("img/1.jpg","img/2.jpg","img/4.jpg","img/3.jpg");
 var img = $("#imgli img");
 var next = $("#next");
 var prev = $("#prev");
 var timer;
 var i =0;
 img.attr("src",imgs[i]);

 next.click(function(){
    if(i==3)
    {
       i=0;
    }
    else {
       i++;
    }
    
    img.fadeTo("slow",0.3).fadeTo("slow",1).attr("src",imgs[i]);
 })

 prev.click(function(){
    if(i==0)
    {
       i=3;
    }
    else {
       i--;
    }
    
    img.fadeTo("slow",0.3).fadeTo("slow",1).attr("src",imgs[i]);
 })

 function play(){
           timer = setInterval(function(){
             next.click();
           },3000);
        }

function stop(){
           clearInterval(timer);
    }

img.mouseover(function(){
     stop();
})
img.mouseout(function(){
     play();
})
黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(2)
天蓬老师

点击前后按钮问题

jQuery 的 fadeTo 方法相当于设置了一个 setTimeout,替换图片路径的操作肯定在 fadeTo 之前。

img.fadeTo("slow",0.3).fadeTo("slow",1).attr("src",imgs[i]);

修改成

img.fadeTo('slow', 0.3, function() {
    img.fadeTo("slow",1).attr("src",imgs[i]);
});

自动播放问题

在整体代码最下方添加:

play();
怪我咯

要不要这么复杂,推荐个slick

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号