如何制作jQuery滑块循环
如何制作jQuery滑块循环
提问于 2014-07-28 08:47:20
我有一个滑块的以下代码，它的工作很完美，但滑块停止后，通过图像到最后一个。我想让这个滑块无限循环。代码是：
<script type="text/javascript">
$(function() {
setInterval("rotateImages()", 3000);
});
function rotateImages() {
var oCurPhoto = $('#chica div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.lenght == 0)
onNxtPhoto = $('#chica div.first');
oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0},2000,
function() {
oCurPhoto.removeClass('prevous');
});
$('#images').animate({"left": "=0"}, 1000);
}
</script>HTML是这样的：
<div class="current">
<a href="#"><img src="galeria_1.jpg"
alt="Galeria de Imagenes" width="960" height="310" class="galeria" /></a>
</div>
<div>
<a href="#"><img src="galeria_1.jpg" alt="Galeria de Imagenes"
width="960" height="310" class="galeria" /></a>
</div>下面是css：
#chica div {
position: absolute;
z-index: 0;
}
#chica div.previous {
z-index: 1;
}
#chica div.current {
z-index: 2;
}如果有用，这里是指向站点"http://negociosensanjuan.com/w/Bufetes/“的链接。
我需要向jquery代码添加什么才能使其循环？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-28 09:30:44
在悬停时循环和暂停：
var cur = 0, // Start Slide Index. We'll use ++cur to increment index
pau = 2000, // Pause Time (ms)
fad = 500, // Fade Time (ms)
$ga = $('#gallery'), // Cache Gallery Element
$sl = $('> div', $ga), // Cache Slides Elements
tot = $sl.length, // We'll use cur%tot to reset to first slide
itv; // Used to clear on mouseenter
$sl.hide().eq(cur).show(); // Hide all Slides but desired one
function stop() { clearInterval(itv); }
function play() { itv = setInterval(anim, pau); }
function anim() { $sl.fadeOut(fad).eq(++cur % tot).stop().fadeIn(fad); }
$ga.hover(stop, play);
play(); // Play!/*QuickReset*/
*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
/*Fade Gallery*/
#gallery {
position: relative;
width: 100%;
height: 50vh;
}
#gallery > div {
position: absolute; /* overlap each slide */
width: inherit; /* as #gallery parent */
height: inherit; /* as #gallery parent */
background: transparent none 50% 50% / cover no-repeat;
}<div id="gallery">
<div style="background-image:url('//placehold.it/960x310/0bf/fff')">
Hover...
</div>
<div style="background-image:url('//placehold.it/960x310/f0b/fff')">
...to...
</div>
<div style="background-image:url('//placehold.it/960x310/b0f/fff')">
...pause!
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
如果你想使用CSS3来完成的转换，你可以修改上面的代码来处理类，而不是jQuery的动画方法：
let cur = 0,
itv = null;
const kls = "isVisible",
$ga = $("#gallery"),
$sl = $(">*", $ga),
tot = $sl.length,
stop = () => clearInterval(itv),
play = () => itv = setInterval(anim, 2000),
anim = () => {
const $slCur = $sl.eq(cur);
$sl.not($slCur).removeClass(kls);
$slCur.addClass(kls);
cur = ++cur % tot;
};
$ga.hover(stop, play);
anim(); // Trigger current slide Visibility logic
play(); // Play!/*QuickReset*/
*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
/*Fade Gallery*/
#gallery {
position: relative;
width: 100%;
height: 50vh;
}
#gallery > * {
position: absolute; /* overlap each slide */
width: inherit; /* as #gallery parent */
height: inherit; /* as #gallery parent */
background: transparent none 50% 50% / cover no-repeat;
transition: 0.7s;
visibility: hidden;
opacity: 0;
}
#gallery > *.isVisible { /* this class is handled by JS */
visibility: visible;
opacity: 1;
}<div id="gallery">
<div style="background-image:url('//placehold.it/960x310/0bf/fff')">
Hover...
</div>
<div style="background-image:url('//placehold.it/960x310/f0b/fff')">
...to...
</div>
<div style="background-image:url('//placehold.it/960x310/b0f/fff')">
...pause!
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24987135
复制相关文章
相似问题