Jquery图像滑块自动播放答案

【问题标题】：Jquery image slider auto playJquery图像滑块自动播放
【发布时间】：2014-10-02 06:53:19
【问题描述】：

我想从我的滑块 jquery 部分添加一个自动播放。我该怎么办？

我有一个下一个和一个上一个按钮，但我想添加一个自动播放以及当鼠标悬停在幻灯片上自动停止的图像时。

有人可以帮我吗？

这是我来自 codepen 的 DEMO 页面

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

});

【问题讨论】：

你想要什么样的滑块？保持移动滑块或一张一张地滑动图像？签出this
@HendryTanaka 我想要自动播放只向左移动。

标签： javascript jquery

【解决方案1】：

像这样修改你的脚本：

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

【讨论】：

【解决方案2】：

我用这段代码找到了解决方案：

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

【讨论】：

@HendryTanaka 我做不到。
停止动画使用 stop() 函数。在您的代码案例中，添加此代码$('ul li').hover(function(){ $('#slider ul').stop(); });

【解决方案3】：

将此添加到您的 javascript 代码末尾的最后一个“});”之前

      var myparam1 = true;

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

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

【讨论】：