自动播放在jquery滑块中不起作用

时间:2018-06-11 06:32:56

标签: javascript jquery slider

我有一个作者的这个jquery滑块。我确实内置了自动播放功能。但是当我在我的网站上使用它时,jquery滑块在自动播放时没有改变。以下是该代码

的代码

根据制作幻灯片自动播放的文档,您需要将以下代码放入主索引HTML文件中。但即使在添加此代码后,幻灯片自动播放也无法正常工作。并且控制台中未报告任何错误。

我已将此代码放在脚本标记之后,该标记将slider.js添加到HTML。

index.html中的代码

<script>
$(function () {
    $('#slider').rbtSlider({
        height: '500px',
        'dots': true,
        'arrows': true,
        'auto': 1
    });
});
</script>

滑块html代码

 <div class="slider" id="slider">
    <div class="slItems">
        <div class="slItem">
            <div class="slText">
                <p>
                    some content
                </p>
            </div>
        </div>
        <div class="slItem">
            <div class="slText">
                <p>
                    some content
                </p>
            </div>
        </div>
    </div>
</div>

slider.js代码

jQuery.fn.rbtSlider = function(opt){
        return this.each(function() {
            var slider = $(this);
            if (opt.height) slider.css('height', opt.height);
            slider.find('.slItem').first().addClass('active');
            if (opt.dots) {
                var count = slider.find('.slItem').length;
                slider.append(
                    $('<div/>', {
                        class: 'slDots',
                        html: $('<div/>', {
                            class: 'slDotsSingle active'
                        })
                    })                                  
                );
                for (var i = 1; i < count; i++) {
                    slider.find('.slDotsSingle.active').clone().removeClass('active').appendTo($(this).find('.slDots'));    
                }
                slider.find('.slDotsSingle').on('click', function(){
                    curIndex = $(this).parents('.slDots').find('.active').removeClass('active').index() + 1;
                    index = $(this).addClass('active').index() + 1;
                    if (index != curIndex) {
                        if (index > curIndex) nav('next', index);
                        else nav('prev', index);
                    }
                });
            }
            if (opt.arrows) {
                slider.append(
                    $('<div/>', {
                        class: 'ctrlPrev',
                        html: '&lsaquo;'
                    }).on('click', function(){
                        nav('prev');
                    })
                ).append(
                    $('<div/>', {
                        class: 'ctrlNext',
                        html: '&rsaquo;'
                    }).on('click', function(){
                        nav('next');
                    })
                );
            }
            if (opt.auto) {
                var time = setInterval(function(){nav('next')}, opt.auto * 1000);
                slider.on('mouseover', function() {
                    clearInterval(time);
                }).on('mouseleave', function() {
                    time = setInterval(function(){nav('next')}, opt.auto * 1000);
                });
            }

            function nav(side, index) {
                if (index) {
                    nextItem = slider.find('.slItem').eq(index - 1);
                } else {
                    if (side == 'prev') {
                        if (slider.find('.slItem.active').prev().length) nextItem = slider.find('.slItem.active').prev();  
                        else nextItem = slider.find('.slItem').last();
                    } else {
                        if (slider.find('.slItem.active').next().length) nextItem = slider.find('.slItem.active').next();
                        else nextItem = slider.find('.slItem').first();
                    }    
                    slider.find('.slDots > .active').removeClass('active').parent().find('.slDotsSingle').eq(nextItem.index()).addClass('active');
                }
                nextItem.addClass(side + 'Item').delay(50).queue(function(){
                    slider.find('.slItems > .active').addClass(side).delay(700).queue(function(){
                        $(this).removeClass(side +' active').dequeue();
                    });

                    $(this).addClass(side).delay(700).queue(function(){
                        $(this).removeClass(side + ' ' + side + 'Item').addClass('active').clearQueue();
                    });

                    $(this).dequeue();
                });
            }
        });
    };

0 个答案:

没有答案