Jquery图像滑块自动播放

Jquery image slider auto play

本文关键字：自动播放 图像 Jquery      更新时间：2023-09-26

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

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

有人能帮我吗？

这是我的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();
    });
});

这样修改脚本：

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

在最后的"｝；"之前将其添加到javascript代码的末尾

      var myparam1 = true;
      (function(){
       if (myparam1){
        moveLeft();};
        setTimeout(arguments.callee, 1000);
      })();
      $( "#slider" )
        .mouseenter(function(){myparam1 = false;})
        .mouseleave(function(){myparam1 = true;});
相关文章：