Question

我希望有人可以救我的！我正在尝试为我的页面创建一个（希望）简单的旋转横幅。我有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
})();

非常感谢能帮助我的人。

Answer 1

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

Answer 2

实现所需功能的最简单方法是使用Malsup的Cycle Plugin。转到http://jquery.malsup.com/cycle/并下载脚本，然后查看他提供的详细记录的演示。使用Cycle让您有机会利用大量不同的选项，这将永远带您进行代码处理。

循环分区和缩略图

2 个答案:

Fade rotator - Demo on jsBin