循环 div 和缩略图

2022-01-22 00:00:00 hover jquery html rotator

我希望有人能救我!我正在尝试为我的页面创建一个(希望如此)简单的旋转横幅.我有 7 个包含照片和文字的 div,它们如下:

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>

在这些 div 下方,我有 7 个相应的 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>

我想做几件事:

1) 每 5 秒循环通过一个新的 div(因此content-1"会显示 5 秒,然后是content 2"等.

1) Every 5 seconds cycle through a new div (so "content-1" would display for 5 seconds, then "content 2" etc.

2) 为当前缩略图应用一个名为cr-rotator"的类.我已经设置了样式.

2) Apply a class to the current thumbnail called "cr-rotator". I have the style already setup.

3) 当用户将鼠标悬停在主 div 或缩略图 div 上时,我希望能够暂停它的旋转.

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) 最后,我想拥有它,这样如果您将鼠标悬停在缩略图上,它会更改主要内容,然后在您关闭鼠标时继续循环.例如,假设您将鼠标悬停在thumb-content-3"上,它将使 divcontent-3"可见,然后当您将鼠标移出时,它将继续循环.

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 - 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();
    });
    

相关文章