如何在jquery中让多项滑块无限重复
如何在jquery中让多项滑块无限重复
提问于 2018-05-16 19:46:47
因此，我有一个画廊，其中包括一个滑块。我想让滑块无限循环，但我似乎无法掌握它的诀窍。我是jQuery的初学者。我不想使用Slick，我已经知道它的存在了。我希望图像不断重复，当我悬停在它上面时，也希望滑块停止移动。但我尝试的每一件事似乎都不管用。代码如下：
function set_body_height() {
}
$(document).ready(function () {
var thumbnail_array = $(".slides img").map(function () {
return $(this).attr("src");
}).get();
$('#MainImage').attr('src', thumbnail_array[0]);
$('#Previous').css("visibility", "hidden");
var lengthImages = thumbnail_array.length;
var CurrImage = 0;
var widthImg = 210;
var BottomLength = 1;
var IndexDiff;
$('.slides li img').click(function () {
var Imagesrc = $(this).attr('src');
var ImageIndex = $(this).parent('.slide').index();
$('#MainImage').fadeOut('slow', function () {
if (ImageIndex <= lengthImages - BottomLength) {
IndexDiff = CurrImage;
CurrImage = ImageIndex;
IndexDiff = Math.abs(IndexDiff - CurrImage);
$('#slider .slides').animate({ 'margin-left': '-=' + widthImg * IndexDiff }, 4000);
$('#MainImage').attr('src', Imagesrc);
if (ImageIndex != 0) {
if ($('#Previous').css("visibility") == "hidden") {
$('#Previous').css("visibility", "visible");
}
}
if (ImageIndex == lengthImages - BottomLength) {
if ($('#Next').css("visibility") == "visible") {
$('#Next').css("visibility", "hidden");
}
}
}
else {
$('#MainImage').attr('src', Imagesrc);
}
}).fadeIn(3000);
});
$('#Next').click(function () {
$('#MainImage').fadeOut('slow', function () {
CurrImage = CurrImage + 1;
if (CurrImage <= lengthImages - BottomLength) {
$('#slider .slides').animate({ 'margin-left': '-=' + widthImg }, 000);
}
$('#MainImage').attr('src', thumbnail_array[CurrImage]);
if (CurrImage == lengthImages - BottomLength) {
$('#Next').css("visibility", "hidden");
}
if ($('#Previous').css("visibility") == "hidden") {
$('#Previous').css("visibility", "visible");
}
}).fadeIn(3000);
$('.slides li:last').after($('.slides li:first'));
});
$('#Previous').click(function () {
$('#MainImage').fadeOut('slow', function () {
CurrImage = CurrImage - 1;
$('#slider .slides').animate({ 'margin-left': '+=' + widthImg }, 4000);
$('#MainImage').attr('src', thumbnail_array[CurrImage]);
if (CurrImage == 0) {
$('#Previous').css("visibility", "hidden");
}
if ($('#Next').css("visibility") == "hidden") {
$('#Next').css("visibility", "visible");
}
$('.slides li:first').after($('.slides li:last'));
}).fadeIn(1000);
});
$('.slides li img').hover(function () {
$(this).css('cursor', 'pointer');
$(this).css({ 'filter': 'alpha(opacity=50)', 'opacity': '0.5' });
}, function () {
$(this).css('cursor', 'none');
$(this).css({ 'filter': 'alpha(opacity=100)', 'opacity': '1' });
});
var CurrSlides = 0;
setInterval(function () {
$('#slider .slides').animate({ 'margin-left': '-=210' }, 10000,
function () {
CurrSlides += 1;
if (CurrSlides === thumbnail_array.length-2) {
$('#slider .slides').css('margin-left', '630');
}
});
}, 3000);
//the images don't go over the slider
function set_body_height() {
$('#mainpic img').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});这是html：
<div>
<div id="MainDiv">
<div id="mainpic">
<img src="img/pic1.jpg" alt="London" id="MainImage" width="100%"/></div>
<div id="child">
<img id="Next" src="img/rightarrow.png" class="NextButton" style="height: 50px;"/>
<img id="Previous" src="img/leftarrow.png" class="PreButton" style="height: 50px;"/>
</div>
</div>
<div id="slider">
<ul class="slides">
<li class="slide">
<img src="img/pic1.jpg" alt="London" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic2.jpg" alt="Florence" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic3.jpeg" alt="Amsterdam" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic4.jpg" alt="Venice" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic5.jpg" alt="Prague" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic6.jpg" alt="Krakow" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic7.jpg" alt="Vienna" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic8.jpg" alt="Szczecin" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic9.jpg" alt="Thassos" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic10.jpg" alt="Budapest" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic11.jpg" alt="Pisa" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic12.jpg" alt="Verona" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic13.jpg" alt="Ljubljana" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic14.jpg" alt="Bratislava" width="200" height="120"/>
</li>
<li class="slide">
<img src="img/pic15.jpg" alt="Zakopane" width="200" height="120"/>
</li>
</ul>
</div>
</div>你会怎么做呢？
提前谢谢你！
回答 1
Stack Overflow用户
发布于 2018-05-16 20:06:03
对于要循环的滑块，请尝试执行以下操作：
获取最大幻灯片数量：
var allslides = $('.slides li').length;在你的时间间隔中，检查当前幻灯片是否在最后一张幻灯片上(在CurrSlides += 1;线上)。如果是，则将其重置为第一个：
if (CurrSlides == allslides) currslides = 0
else CurrSlides += 1;要让滑块在鼠标悬停时停止，请清除鼠标悬停时的间隔：https://api.jquery.com/mouseover/
首先为interval函数指定一个名称：
myintervalfunction = function() {
$('#slider .slides').animate({ 'margin-left': '-=210' }, 10000,
function () {
CurrSlides += 1;
if (CurrSlides === thumbnail_array.length-2) {
$('#slider .slides').css('margin-left', '630');
}
});
}开始间隔：
setInterval( myinterval , 3000);鼠标悬停时停止：
$( ".slide" ).mouseover(function() {
clearInterval(myinterval );
});在mouseleave上重新启动：
$( ".slide" ).mouseleave(function() {
setInterval( myintervalfunction , 3000);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50370115
复制相关文章
相似问题
腾讯云开发者
