更改幻燈片爲自動播放

Question

對於JQuery，我很新，並且有一個簡單的問題。我在網上發現了這個簡單的幻燈片，但想要自動播放幻燈片並刪除複選框按鈕。似乎無法弄清楚。任何幫助將不勝感激。基本上，當選擇「複選框」時，幻燈片將自動播放。

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

    $('#checkbox').change(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 
    }); 

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

}); 

Answer 1

如果我的理解是否正確，你只想幻燈片，而不必點擊複選框... 如果是這樣的情況下，只是把這個代碼自動播放：

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

出的$（「＃複選框「），點擊功能。

下面是完整的代碼：

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

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

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

現在只是刪除複選框元素，滑蓋就會自動自動播放...

Answer 2

替換的代碼：

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



    $('#checkbox').change(function(){ 
     setInterval(function() { 
      moveRight(); 
     }, 3000); 
     }); 

用下面的代碼：

$('#slider').ready(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 
    }); 

這個改變對我有用。祝你好運。