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

我这个轮播图是用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();
})
黄舟
黄舟

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!