在这些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和缩略图
发布评论