我有这个代码:
<script type="text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() { //this is started when the body is loaded
setInterval(displayNextImage, 10000);
}
var images = [], x = -1;
images[0] = "image0.jpg";
images[1] = "image1.jpg";
images[2] = "image2.jpg";
images[3] = "image3.jpg";
</script>
基本上每 10 秒(由 setInterval 定义)它会切换到下一张图像,然后再次循环回到第一张图像。 我需要的是当它显示图像 0 时,它会在图像下方显示标题“此图像由等人拍摄”,但是当它更改为第二张图像 (Image1) 时,它会更改为第二张图片的标题等等? 最好使用 Javascript 或者必要时使用 JQuery(我更擅长 JavaScript)
我知道这可以通过在底部添加一些空间并以这种方式添加一些文本,在 Photoshop 中编辑照片来完成,但我认为它看起来不太好。
最佳答案
您可以使用 displayNextImage()、displayPreviousImage() 函数将准备好的标题放入 DIV 元素中:
<script type="text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
document.getElementById("cap").innerHTML = captions[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
document.getElementById("cap").innerHTML = captions[x];
}
function startTimer() { //this is started when the body is loaded
setInterval(displayNextImage, 10000);
}
var images = [], captions = [], x = -1;
images[0] = "image0.jpg";
images[1] = "image1.jpg";
images[2] = "image2.jpg";
images[3] = "image3.jpg";
captions[0] = "foo";
captions[1] = "bar";
captions[2] = "foobar";
captions[3] = "foobarfoo";
</script>
在您的 HTML 中,添加 <div id="cap"></div>
关于javascript - 标题基于不断变化的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33092362/