javascript - 请问我这样用jq写的轮播图 淡入淡出的切换效果为什么没用啊 而且自动轮播也有问题

问题描述

问 题

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

$(function (){

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

});

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

});

  $(".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();
})

解决方案

点击前后按钮问题

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();

这篇关于javascript - 请问我这样用jq写的轮播图 淡入淡出的切换效果为什么没用啊 而且自动轮播也有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！