循环Divs和缩略图 [英] Cycle Divs and Thumbnails
问题描述
< div id =content-1> ;示例文本< / div>
< div id =content-2>示例文本< / div>
< div id =content-3>示例文本< / div>
< div id =content-4>示例文本< / div>
< div id =content-5>示例文本< / div>
< div id =content-6>示例文本< / div>
< div id =content-7>示例文本< / div>
在这些div下面，我有7个相应的div，它们是缩略图：
< div id =thumb-content-1>示例文本< / div>
< div id =thumb-content-2>示例文本< / div>
< div id =thumb-content-3>示例文字< / div>
< div id =thumb-content-4>示例文本< / div>
< div id =thumb-content-5>示例文本< / div>
< div id =thumb-content-6>示例文本< / div>
< div id =thumb-content-7>示例文本< / div>
我想做几件事：
1）每隔5秒循环一个新的div（所以content-1会显示5秒，然后显示content 2等）。b）b
$ b
2）将一个类应用到当前缩略图cr-rotator。我已经设置了样式。
3）当用户将鼠标悬停在主div或缩略图div上时，我希望能够暂停它。 p>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; //增加i，
//并在等于divs.length
}）（）时重置为0;
非常感谢任何能帮助我的人。
Fade rotator - 关于jsBin的演示
< div id =rotator>
< div id =slides>
< div>示例文本1< / div>
< div>示例文本2< / div>
< div>示例文本3< / div>
< / div>
< div id =thumbs>
< div> 1< / div>
< div> 2< / div>
< div> 3< / div>
< / div>
< / div>
- 自动淡出
- 暂停悬停
- 悬停拇指触发主幻灯片
- 重新启动停止位置
和jQ代码：
var $ el = $（'＃fader'），
// SETUP ////////
F = 600，//淡化时间
P = 2000，//暂停时间
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
函数anim（）{
$ sl.eq（C％N）.stop（1）.fadeTo（F，1）.siblings（）。 fadeTo（F，0）;
$ th.removeClass（'on'）。eq（C％N）.addClass（'on'）;
// AUTO动画
函数autoAnim（）{
T = setTimeout（function（）{
C ++;
anim ）; //动画
autoAnim（）; //准备另一个迭代
}，P + F）;
}
autoAnim（）; //开始循环
// HOVER PAUSE
$ el.hover（function（e）{
return e.type ==''mouseenter'？clearTimeout（T）： autoAnim（）;
}）;
$ b $ // HOVER THUMBNAILS
$ th.on（'mouseenter'，function（）{
C = $ th.index（this）;
anim（） ;
}）;
I'm hoping someone can save my me! I'm trying to create a (hopefully) simple rotating banner for my page. I have 7 divs that contain photos and text, they are as follows:
<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>
And below those divs I have 7 corresponding divs that are thumbnails:
<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>
I would like to do a few things:
1) Every 5 seconds cycle through a new div (so "content-1" would display for 5 seconds, then "content 2" etc.
2) Apply a class to the current thumbnail called "cr-rotator". I have the style already setup.
3) I would like to be able to pause it from rotating when a user hovers over either the main div or thumbnail div.
4) Lastly, I would like to have it so that if you hover over a thumbnail it would change the main content, then continue cycling when you mouse off. So say for example you hover over 'thumb-content-3' it will make the div 'content-3' visible and then when you mouse out it will continue cycling.
I understand there is a lot demanded here and I thank in advance anyone who can help me out. I have been provided a script to cycle through the main images but I'm not sure how to implement the rest:
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
})();
Thank you so much to anyone that can help me.
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>
- Auto fade
- Pause on hover
- Hover on thumbs triggers the main slide
- Restart where stopped
And the jQ code:
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();
});
这篇关于循环Divs和缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
