0

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

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

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

所以....我的问题是一个两部分的问题。1.）我是否以正确的方式处理这个问题，如果是这样，我如何确保文本和图像保持成对并同时旋转。2.) 我是否应该创建 10 个 div 对（总共 20 个）并创建一个脚本以使 20 个中的 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" />
4

2 回答 2

1

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

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

<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进行客户端工作。根据您的喜好设置和自定义非常容易。它还有很多选项（例如悬停暂停、自动播放）。

于 2011-09-01T20:19:44.547 回答
0

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

http://rhmachine.flashfirehosting.com/

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

于 2011-09-01T18:30:18.833 回答