小编use*_*942的帖子

我需要使用jQuery循环一些div.循环的意思是我有一系列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>

我需要发生的是每5秒我需要他们改变.因此div"Content-1"将显示5秒钟,然后div"Content 2"将显示5秒等.

我觉得这很容易做到,但在JavaScript和jQuery方面我是个白痴.

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