0

我正在尝试做一个滑块，但遇到了一些问题。如您所见，我有一个#timer 按钮，当您单击该按钮时，它会前进下一张幻灯片，没有问题。

但我希望它自己点击，所以我尝试使用 setInterval 但做不到。触发第一次点击navitem也没有问题，但不能在该按钮上设置间隔。

<script type="text/javascript">
$(window).load(function() {
    $('.slideritem p').stop(true).show(1000);
});

$(document).ready(function() {
    $('.slideritem').hide();
    $('.slideritem:first').fadeIn(1000);

    $('.navitem').click(function () {
        var index = $('.navitem').index(this)
        var indexlast = $('.navitem').index(this) + 1
        $('.slideritem').hide();
        $('.slideritem:nth-child(' + indexlast + ')').stop(true).fadeIn(1000);
        $('.navitem img ').removeClass('current');
        $('.navitem:nth-child(' + indexlast + ') img ').addClass('current');

        $('#timer').click(function () {
            index++$('.slideritem').hide();
            $('.slideritem').eq(index).fadeIn(1000);
            $('.navitem img').removeClass('current');
            $('.navitem img').eq(index).addClass('current');

            if (index == 3) {
                index = -1
            }
        });
    });

    $('.navitem:first').trigger('click');
    setInterval($('#timer').trigger('click'), 1500);
});    
</script>
4

1 回答 1

0

不要为此触发点击事件。这是一个坏习惯。

为滑动效果制作一个单独的函数。然后分别从点击和计时器调用它。

应该是这样的：

function Slide() {
    // Perform the sliding here
}

$('#timer').click(Slide);

setInterval(Slide,1500);

我对您的代码做了一些改进，现在它正在工作。还有几件事可以改进...

jsFiddle 演示

于 2013-08-21T09:27:03.383 回答