我写了一个幻灯片插件,但出于某种原因,可能是因为我整天都在研究它,一旦它达到自动模式的最后一个状态,我就无法确切地弄清楚如何让它回到状态一。
我认为在这一点上这是一个架构问题,因为基本上我为每个面板附加了向左滚动的数量(负面地((一个面板包含 4 个图像,这是当前显示给用户的图像(。第一个选项卡应得到:0,第二个 680,第三个,1360,依此类推。这只是通过计算 4 张图像的宽度加上填充来完成的。
我目前将其放在setTimeout(function(){})
上以自动移动它,效果很好(除非您还单击选项卡,但这是另一个问题(。我只想在它处于最后一个状态(numTabs - 1(时这样做,以动画并将其状态移回第一个状态。
法典:
(函数($( { var 方法 = { 初始化: 函数(选项( { var settings = $.extend({ "速度": "1000", "间隔":"1000", "自动":"开" },选项(;
return this.each(function() {
var $wrapper = $(this);
var $sliderContainer = $wrapper.find('.js-slider-container');
$sliderContainer.hide().fadeIn();
var $tabs = $wrapper.find('.js-slider-tabs li a');
var numTabs = $tabs.size();
var innerWidth = $wrapper.find('.js-slider-container').width();
var $elements = $wrapper.find('.js-slider-container a');
var $firstElement = $elements.first();
var containerHeight = $firstElement.height();
$sliderContainer.height(containerHeight);
// Loop through each list element in `.js-slider-tabs` and add the
// distance to move for each "panel". A panel in this example is 4 images
$tabs.each(function(i) {
// Set amount to scroll for each tab
if (i === 1) {
$(this).attr('data-to-move', innerWidth + 20); // 20 is the padding between elements
} else {
$(this).attr('data-to-move', innerWidth * (i) + (i * 20));
}
});
// If they hovered on the panel, add paused to the data attribute
$('.js-slider-container').hover(function() {
$sliderContainer.attr('data-paused', true);
}, function() {
$sliderContainer.attr('data-paused', false);
});
// Start the auto slide
if (settings.auto === 'on') {
methods.auto($tabs, settings, $sliderContainer);
}
$tabs.click(function() {
var $tab = $(this);
var $panelNum = $(this).attr('data-slider-panel');
var $amountToMove = $(this).attr('data-to-move');
// Remove the active class of the `li` if it contains it
$tabs.each(function() {
var $tab = $(this);
if ($tab.parent().hasClass('active')) {
$tab.parent().removeClass('active');
}
});
// Add active state to current tab
$tab.parent().addClass('active');
// Animate to panel position
methods.animate($amountToMove, settings);
return false;
});
});
},
auto: function($tabs, settings, $sliderContainer) {
$tabs.each(function(i) {
var $amountToMove = $(this).attr('data-to-move');
setTimeout(function() {
methods.animate($amountToMove, settings, i, $sliderContainer);
}, i * settings.interval);
});
},
animate: function($amountToMove, settings, i, $sliderContainer) {
// Animate
$('.js-slider-tabs li').eq(i - 1).removeClass('active');
$('.js-slider-tabs li').eq(i).addClass('active');
$('#js-to-move').animate({
'left': -$amountToMove
}, settings.speed, 'linear', function() {});
}
};
$.fn.slider = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
return false;
}
};
})(jQuery);
$(window).ready(function() {
$('.js-slider').slider({
'speed': '10000',
'interval': '10000',
'auto': 'on'
});
});
auto
和animate
方法是魔术发生的地方。参数speed
是动画的速度,interval
是频率,目前设置为 10 秒。
如果你愿意,谁能帮我弄清楚如何让它"无限循环"?
这是一个JSFiddle
放弃.each()
和setTimeout()
组合,改用setInterval()
。使用.each()
自然会将您的循环限制在集合的长度上,因此最好使用不是循环机制,并且您可以在您选择的任何点中断。
此外,您可以通过检查.active
来轻松识别当前的可见元素,从我所看到的。
您可能需要这样的东西:
setInterval(function () {
// do this check here.
// it saves you a function call and having to pass in $sliderContainer
if ($sliderContainer.attr('data-paused') === 'true') { return; }
// you really need to just pass in the settings object.
// the current element you can identify (as mentioned),
// and $amountToMove is derivable from that.
methods.animate(settings);
}, i * settings.interval);
// ...
// cache your slider tabs outside of the function
// and just form a closure on that to speed up your manips
var slidertabs = $('.js-slider-tabs');
animate : function (settings) {
// identify the current tab
var current = slidertabs.find('li.active'),
// and then do some magic to determine the next element in the loop
next = current.next().length >= 0 ?
current.next() :
slidertabs.find('li:eq(0)')
;
current.removeClass('active');
next.addClass('active');
// do your stuff
};
代码没有优化,但我希望你能看到我在这里得到的地方。