我有一个作者的这个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: '‹'
}).on('click', function(){
nav('prev');
})
).append(
$('<div/>', {
class: 'ctrlNext',
html: '›'
}).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();
});
}
});
};