jquery图像滑块自动播放

我想从我的滑块jquery部分添加一个自动播放。我能做什么？jquery图像滑块自动播放

我有一个下一个& prev按钮，但我想添加一个自动播放，并且当鼠标悬停在幻灯片自动停止的图像上。

任何人都可以帮助我吗？

这是我DEMO页从codepen

jQuery(document).ready(function ($) { 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 200, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 

});

来源

2014-10-02 innovation

你想要什么样的滑块？继续移动滑块或逐个滑动图像？检查[this]（http://slideshow.hohli.com/docs/demo06.html）out – 2014-10-02 06:58:20

@HendryTanaka我想自动播放只moveLeft。 – innovation 2014-10-02 07:01:30

修改你的这样的脚本：

jQuery(document).ready(function ($) { 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 1000, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 
    function do_slide(){ 
    interval = setInterval(function(){ 
     moveLeft(); 
    }, 1000); 
    } 
    do_slide(); 


    $('ul li').hover(function(){ 
     clearInterval(interval); 
    }); 
     $('ul li').mouseleave(function(){ 
     do_slide(); 
    }); 
});

来源

2014-10-02 07:34:55

运行良好！相信我！对不起，乱码。 – 2014-10-02 07:35:21

我发现这个代码的解决方案：

$(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 
    });

来源

2014-10-02 07:12:55 innovation

停止滑动悬停？ – 2014-10-02 07:19:31

@HendryTanaka我无法做到。 – innovation 2014-10-02 07:25:20

要停止动画，请使用stop（）函数。在你的代码情况下，添加这个代码'$（'ul li'）。hover（function（）{（'＃slider ul'）。stop（）; }）;' – 2014-10-02 07:26:25

这增加的决赛之前你的JavaScript代码的结束“}） ;“

 var myparam1 = true; 

     (function(){ 
     if (myparam1){ 
     moveLeft();}; 
     setTimeout(arguments.callee, 1000); 
     })(); 

     $("#slider") 
     .mouseenter(function(){myparam1 = false;}) 
     .mouseleave(function(){myparam1 = true;});

来源

2014-10-02 07:17:17

jquery图像滑块自动播放

回答

相关问题