0

我试图让这个滑块在 Javascript (jquery) 中自动播放，但我似乎无法让它工作，有谁知道我怎么能做到这一点？每次我尝试某些东西时，它似乎都会破坏滑块按钮。

jsfiddle 版本：http: //jsfiddle.net/EsdB7/5/

这是当前代码：

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

});
4

2 回答 2

1

尼尔的回答是正确的，但是如果您希望它在页面加载时自动播放，您可以将其添加到您的变量声明中：

var auto = setInterval(moveRight, 1000); // 1000 ms = 1 sec

像这样：

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
var auto = setInterval(moveRight, 1000); // 1000 ms = 1 sec
于 2015-01-19T22:00:20.843 回答
0

只需添加以下代码 -

var auto = setInterval(moveRight, 1000); // 1000 ms = 1 sec

后 ：

$('a.control_next').click(function () {
    moveRight();
});
 //any where after the declaration of moveRight function.

发生的事情是，每 1000 毫秒后调用 moveRight 函数。
已编辑代码的 JS FIDDLE

于 2014-03-27T12:00:01.697 回答