Question

我是JQuery的新手，有一个简单的问题。我在网上发现了这个简单的幻灯片，但想要自动播放幻灯片并删除复选框按钮。似乎无法解决这个问题。任何帮助将不胜感激。基本上幻灯片放映时会自动播放＆＃34;复选框＆＃34;被选中。

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

超出$（“＃checkbox”）。点击功能。

这是完整的代码：

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

这一改变对我有用。祝你好运。

将幻灯片更改为自动播放

2 个答案: