How can i insert text in javascript slideshow?
Question
Well...i am making a webpage (a pretend e-shop),and i want to put a slideshow with some text beneath each picture..so far i made the code for the picture slideshow
<!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"> </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> <a href="JavaScript:next()" title="Next">Next</a>
</body>
</html>
but i can not insert text to slide along with each picture...I'd appreciate some help very much
1 answers
solution1
1 2015-05-16 20:44:22
<div id="imageContainer"><img id="img" src="images/img1.jpg" alt="image" title="image"/></div>
<div><caption>hello</caption></div>
Just put another div under the images, using some kind of tag. You could assign values to it within the JS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I loop setTimeout slideshow javascript
How can I insert slide indicator dots in my slideshow?
Javascript how can i make slideshow only for mobile
Slideshow using MooTools JavaScript - How can I position slideshow to rescale in browser window
How can i use javascript to insert text into a textarea?
How can I insert HTML text in Javascript the right way?
How can I insert some text into a textarea using JavaScript or jQuery?
Acrobat: How can I insert simple text using Javascript?
How Can I insert a text box by using the Javascript
How can I insert text before the file extension with JavaScript?
Related Tags