Question

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

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

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

所以....我的问题是一个2部分的问题。 1.）我是否以正确的方式接近这个，如果是这样，我如何确保文本和图像保持成对并同时旋转。 2.）我应该创建10个div对（总共20个）而不是旋转同一个div内的内容，并创建一个脚本，只是为了让20个中的2个同时可见？如果是的话......脚本上有任何想法吗？

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

<!--- 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插件。

Div Swap with Timed Interval确保配对

2 个答案: