slideshow js code doesn't work
Posted: Tue Aug 10, 2010 5:12 pm
I'm stuck on stupid. it's a simple slideshow that fades in and out images. When I launch the page the images don't fade in and out.
Can anyone check it out and let me know what I'm doing wrong?
Also I want to get rid of the fade and do a push slide of the images from left to right. Is that possible? If so how do I change the code to do it?
thanks!
Here is the html:
Here is the JS code:
Can anyone check it out and let me know what I'm doing wrong?
Also I want to get rid of the fade and do a push slide of the images from left to right. Is that possible? If so how do I change the code to do it?
thanks!
Here is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script language="javascript" src="media/js/jquery.js"></script>
<script language="javascript" src="media/js/slideshow.js"></script>
<style type="text/css">
.container {
width:1062px;
height:265px;
margin:0px;
overflow:hidden;
}
.container div {
width:1062px;
height:265px;
position:absolute;
}
</style>
</head>
<body onload="changeImage();">
<div class="container">
<div class="counter">1</div>
<div class="behind">
<img src="media/slideshowimages/1.jpg" alt="image">
</div>
<div class="infront">
<img src="media/images/1.jpg" alt="image"></div>
</div>
</body>
Here is the JS code:
function changeImage(){
var imageInShow = "3";
var currentImage = $("#counter").html();
currentImage = parseInt(currentImage);
if (currentImage == imageInShow){
var nextImage = 1;
}
else {
var nextImage = currentImage +1;
}
var currentSrc = $(".infront img").attr("src");
var nextSrc = "media/images" + nextImage + ".jpg";
$(".behind img").attr("src" , currentSrc);
$(".infront").css("display" , "none");
$("infront img").attr("src" , nextSrc);
$(".infront").fadeIn(700);
$("#counter").html(nextImage);
setTimeout('changeImage()',5000);
}