gpt4 book ai didi

javascript - 如何在 javascript 幻灯片中插入文本?

转载 作者:行者123 更新时间:2023-12-03 10:07:56 24 4
gpt4 key购买 nike

嗯......我正在制作一个网页(一个假装的电子商店),我想在每张图片下面放一个带有一些文本的幻灯片......到目前为止,我为图片幻灯片制作了代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slide Show</title>
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}

#imageContainer {
<img id="imgreal" src="pics\bg.jpg" />

min-height: 550px;
document.getElementByID("imgreal").style.backgroundImage = string;

}

a {
text-decoration: none;
padding: 5px;
color: #cccc00;
}
</style>

<script type="text/javascript">

var imgSlide;
var pic = 0;
window.onload = function ()
{

imgSlide = document.getElementById('img');

// preload images
images = new Array();
images[0] = new Image();
images[0].src = "images/img1.jpg" ;
images[1] = new Image();
images[1].src = "images/img2.jpg";
images[2] = new Image();
images[2].src = "images/img3.jpg";
images[3] = new Image();
images[3].src = "images/img4.jpg";
images[4] = new Image();
images[4].src = "images/img5.jpg";
images[5] = new Image();
images[5].src = "images/img6.jpg";


}

function slide()
{
imgSlide.src = images[pic].src;
if(pic < images.length-1) // images.length - 1 can be used here
{
pic++;
}
else
{
pic = 0

}
}

function prev()
{


if(pic == 0)
{

pic = 3;

imgSlide.src = images[pic].src;
}
else
{
pic--;
imgSlide.src = images[pic].src;
}
}

function next()
{


if(pic == images.length)
{

pic = 0;
imgSlide.src = images[pic].src;
}
else
{
pic++;
imgSlide.src = images[pic].src;
}


}




</script>




<DIV ID="SLIDESTEXT">&nbsp;</DIV>
</head>

<body background="pics\bg.jpg">

<div id="imageContainer"><img id="img" src="images/img1.jpg" alt="image" title="image"/></div>
<a href="JavaScript:prev()" title="Previous">Previous</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="JavaScript:next()" title="Next">Next</a>

</body>
</html>

但我无法插入文本以随每张图片一起滑动...非常感谢您的帮助

最佳答案

<div id="imageContainer"><img id="img" src="images/img1.jpg" alt="image" title="image"/></div>
<div><caption>hello</caption></div>

只需使用某种标签在图像下放置另一个 div 即可。您可以在 JS 中为其赋值。

关于javascript - 如何在 javascript 幻灯片中插入文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30280469/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com