我希望有人能拯救我!我正在尝试为我的页面创建一个(希望如此)简单的旋转横幅。我有 7 个包含照片和文字的 div,它们如下:
<div id="content-1">Sample text</div>
<div id="content-2">Sample text</div>
<div id="content-3">Sample text</div>
<div id="content-4">Sample text</div>
<div id="content-5">Sample text</div>
<div id="content-6">Sample text</div>
<div id="content-7">Sample text</div>
在这些 div 下方我有 7 个相应的缩略图 div:
<div id="thumb-content-1">Sample text</div>
<div id="thumb-content-2">Sample text</div>
<div id="thumb-content-3">Sample text</div>
<div id="thumb-content-4">Sample text</div>
<div id="thumb-content-5">Sample text</div>
<div id="thumb-content-6">Sample text</div>
<div id="thumb-content-7">Sample text</div>
我想做几件事:
1) 每 5 秒循环一个新的 div(所以“content-1”会显示 5 秒,然后是“content 2”等。
2) 将一个名为“cr-rotator”的类应用于当前缩略图。我已经设置了样式。
3) 我希望能够在用户将鼠标悬停在主 div 或缩略图 div 上时暂停它旋转。
4) 最后,我想要这样,如果您将鼠标悬停在缩略图上,它会更改主要内容,然后在您离开鼠标时继续循环。因此,举例来说,您将鼠标悬停在“thumb-content-3”上,它会使 div“content-3”可见,然后当您将鼠标移开时,它将继续循环。
我知道这里有很多要求,我提前感谢任何可以帮助我的人。我已经获得了一个脚本来循环浏览主要图像,但我不确定如何实现其余部分:
var divs = $('div[id^="content-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(200)
.delay(3000)
.fadeOut(200, cycle);
i = ++i % divs.length; // increment i,
// and reset to 0 when it equals divs.length
})();
非常感谢任何能帮助我的人。
最佳答案
Fade rotator - Demo on jsBin
<div id="rotator">
<div id="slides">
<div>Sample text 1</div>
<div>Sample text 2</div>
<div>Sample text 3</div>
</div>
<div id="thumbs">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
- 自动淡入淡出
- 悬停时暂停
- 悬停在拇指上会触发主幻灯片
- 从停止的地方重新开始
和 jQ 代码:
var $el = $('#fader'),
// SETUP ////////
F = 600 , // Fade Time
P = 2000 , // Pause Time
C = 0 , // Counter / Start Slide# (0 based)
///////////////////
$sl = $('#slides > div'),
$th = $('#thumbs > div'),
N = $sl.length,
T = null;
$sl.hide().eq(C).show();
$th.eq(C).addClass('on');
// ANIMATION
function anim() {
$sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0);
$th.removeClass('on').eq(C%N).addClass('on');
}
// AUTO ANIMATE
function autoAnim() {
T = setTimeout(function() {
C++;
anim(); // Animate
autoAnim(); // Prepare another iteration
}, P+F);
}
autoAnim(); // Start loop
// HOVER PAUSE
$el.hover(function(e) {
return e.type==='mouseenter'? clearTimeout( T ) : autoAnim();
});
// HOVER THUMBNAILS
$th.on('mouseenter', function() {
C = $th.index( this );
anim();
});
关于jquery - 循环 Div 和缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8966117/