具有定时间隔的 Div Swap 确保配对

Question

我已经审查了一些类似的问题，但我似乎找不到将这一切联系在一起的答案。我正在寻找一种创建幻灯片的方法，其中图像和相应的文本块每 10 秒更改一次。 （下面，当我说“旋转”时，我并不是指转动一个角度，而是指从一张可见幻灯片更改为另一张可见幻灯片）

为了进一步说明，让我们将一个文本块和一个图像称为“对”。文本块包含在一个中，图像包含在另一个中。对于这张幻灯片，我将有 10 对。

我可以使用简单的延时 javascript 轻松旋转内部图像，但如果我使用类似的 javascript 旋转文本，有时图像和文本会彼此不同步（不要同时更改）

。 ...我的问题是由两部分组成的问题。 1.）我是否以正确的方式处理这个问题，如果是，我如何确保文本和图像成对并同时旋转。 2.) 我是否应该创建 10 个 div 对（总共 20 个）并创建一个脚本以使 20 个 div 中的 2 个同时可见，而不是旋转同一 div 内的内容？如果是这样...对脚本有什么想法吗？

目前，我正在使用以下脚本来交换图像：

<!--- Start Image Cycler Script --->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timeDelay = 10; // change delay time in seconds
var Pix = new Array
("images2/slide_pics/92028.png" 
,"images2/slide_pics/92026.png" 
,"images2/slide_pics/92027.png" 
,"images2/slide_pics/92534.png" 
,"images2/slide_pics/92034.png" 
,"images2/slide_pics/92555.png" 
,"images2/slide_pics/92700.png" 
,"images2/slide_pics/A73495.png" 
,"images2/slide_pics/92701.png"  
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>
<!--- End Image cycler Script --->

        <img name="ChangingPix" src="images2/slide_pics/92028.png" alt="" width="570" height="346"  class="head-pic" />

Answer 1

（抱歉，我的最后一条评论决定自行发布）

正如凯文·尼尔森（Kevin Nelson）建议的那样，我只需将图像和文本放在同一个包含“块”中。

<div id="slider">


    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    </div>

这样您就不会遇到文本和图像不同步的任何问题。有很多免费的内容/图像滑块。我最近一直在使用 Slides.js 进行客户工作。根据您的喜好进行设置和定制非常容易。它还有很多选项（例如悬停暂停、自动播放）。

Answer 2

也许我误解了这个问题，但是如果您想同时旋转文本和图像，为什么不创建块并旋转整个块。请参阅此页面：

http://rhmachine.flashfirehosting.com/

如果我正确理解了这个问题，并且您想要类似的东西，请告诉我，我将发布我用来执行此操作的 jquery 插件。