Image Slideshow javascript
Question
I can't find out why my Image slideshow doesn't work on the webpage, Can someone tell me why?
I have the code below
<head>
<script type ="text/javaScript">
var image1=new Image()
image1.src="download.jpg"
var image2=new Image()
image2.src="beauty.jpg"
</script>
</head>
<body>
<img src="download.jpg" name="firstImage" height = 100 width=300></img>
</body>
<script type="text/javascript">
//variable that would increment through the images
var step = 1
function slideit() {
//if browser does not support the image object exit
if(!document.images)
return document.images.firstImage.src=eval("image"+step+".src")
if(step<2)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>
</html>
I have tried putting the whole javascript in one tag but it doesn't really affect it, Can someone tell me what I may be missing? Thank you in advance.
4 answers
solution1
0 2014-07-04 11:25:17
Try like this
function slideit() {
if(document.images)
document.images.firstImage.src=eval("image"+step+".src");
if(step<2)
step++
else
step=1
setTimeout(slideit,2500)
}
i have put your code here its working
The problem is if(!document.images) is gives always false so i just make it if(document.images) without this i dont change any of your code..
solution2
0 2014-07-04 11:39:40
Try Like this
<!DOCTYPE html PUBLIC >
<html>
<head>
<head>
<script type ="text/javaScript">
var image1=new Image()
image1.src="download.jpg"
var image2=new Image()
image2.src="beauty.jpg"
</script>
</head>
<body>
<img src="globe/images/correct.png" name="firstImage" height = 100 width=300></img>
</body>
<script type="text/javascript">
//variable that would increment through the images
var step = 1
function slideit() {
if(step<2)
step++
else
step=1
document.images.firstImage.src=window["image"+step].src;
//call function "slideit()" every 2.5 seconds
setTimeout(slideit,2500)
}
slideit()
</script>
</html>
solution3
0 2017-01-12 07:14:29
Which kind of slideshow you want. At background or at image slideshow in div? I mentioned here slideshows of various images using jquery. Try it hope it will be useful to you.
HTML code :
<div id="slide">
<img class="img-responsive disp" src="img/1.jpg"/>
<img class="img-responsive disp" src="img/4.jpg"/>
<img class="img-responsive disp" src="img/2.jpg"/>
<img class="img-responsive disp" src="img/3.jpg"/>
<img class="img-responsive disp" src="img/5.jpg"/>
<img class="img-responsive disp" src="img/14.jpg"/>
</div>
Jquery :
$('document').ready(function() {
var $imgs = $('#slide > img'),
current = 0;
var nextImage = function() {
if (current >= $imgs.length) current = 0;
$imgs.eq(current++).fadeIn(function() {
$(this).delay(800).fadeToggle(nextImage);
})};
nextImage();
});
CSS :
.disp{display:none;}
This works for image slideshow on webpage.
solution4
-1 2014-07-04 11:35:19
There are couple of issues - Image Slideshow javascript - version below is close to what you already have...
(requires 0.png and 1.png in the directory)
<html>
<head>
</head>
<body>
<img src="1.png" name="firstImage" height=100 width=300>
</body>
<script type="text/javascript">
var step = 1;
function slideit() {
var imagenumber = step++ % 2;
var imagesrc = imagenumber + ".png";
document.images.firstImage.src = imagesrc;
setTimeout(slideit,2500)
}
slideit()
</script>
</html>
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.