是否可以使用 jquery 进行不克隆的连续/旋转滑块?要求加载最后一张和上一张幻灯片的 25% 的一半应与第一张/当前幻灯片一起显示。当用户点击下一个/上一个按钮时,它必须是旋转的。
我已经尝试过克隆,但是较小的分辨率很好,在较大的分辨率下甚至显示了 clonnig div。我不应该显示克隆 div。
如果有任何堵塞,请建议我。
<div id="MainSliderContent" style="display: table-cell;">
<div class="Message">
Test 1
</div>
<div class="Message">
Test 2
</div>
<div class="Message">
test 3
</div>
<div class="Message">
Test 4
</div>
</div>
$(document).ready(function () {
//if ($('#MainSliderContent').find('div.Message').length > 1) {
$('#MainSliderContent').find('div.Message:not(:first)').hide();
$('#MainSliderContent').live({
mouseenter: function () {
$(this).addClass('Hover');
},
mouseleave: function () {
$(this).removeClass('Hover');
}
});
setInterval(function () {
if (!$('#MainSliderContent').hasClass('Hover')) {
var $messageObj = $('#MainSliderContent').find('div.Message:visible');
$messageObj.slideUp('slow').next('div.Message').slideDown('slow');
$('#MainSliderContent').find('div.Message:last').after($messageObj);
}
}, 1 * 1000);
//}
});
演示见这个链接:http: //jsfiddle.net/nanoquantumtech/BJ6R7/
您可以使用任何滑块
https://github.com/ProLoser/AnythingSlider/wiki/Usage
用于克隆的代码是
slider.$items//callback argument