I want to have 3 divs that changes its image every second.This code doesnt call any errors but the only one that is working is the 3rd div with source of script9.js. Why is this happening? Please help... Here it is:
I have 3 dives that contain images from there own folder:
<html>
<head>
<script type="text/javascript" src="mainjavascript.js"></script>
<script type="text/javascript" src="script8.js"></script>
<script type="text/javascript" src="script9.js"></script>
</head>
<body onload = "startTimer()">
<div><img id="img" src="pictures7/1.jpg">7</div>
<div><img id="img2" src="pictures8/1.jpg">8</div>
<div><img id="img3" src="pictures9/1.jpg">9</div>
</body>
</html>
I have 3 similar JavaScript files, one for each div that gets element by ID the only difference is in "** **" signs:
function displayImage(image) {
document.getElementById(**"img"**).src = image;
}
function displayNextImage() {
x = (x == images.length - 1) ? 0 : x + 1;
displayImage(images[x]);
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
displayImage(images[x]);
}
function startTimer() {
setInterval(displayNextImage, 1000);
}
var images = [], x = -1;
images[0] = **"pictures7/"** + "1.jpg";
images[1] = **"pictures7/"** + "2.jpg";
for(var y=2;y<4;y++){
images[y]= **"pictures7/"** + (y+1) + ".jpg";
}
2nd div:
function displayImage(image) {
document.getElementById(**"img2"**).src = image;
}
function displayNextImage() {
x = (x == images.length - 1) ? 0 : x + 1;
displayImage(images[x]);
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
displayImage(images[x]);
}
function startTimer() {
setInterval(displayNextImage, 1000);
}
var images = [], x = -1;
images[0] = **"pictures8/"** + "1.jpg";
images[1] = **"pictures8/"** + "2.jpg";
for(var y=2;y<4;y++){
images[y]= **"pictures8/"** + (y+1) + ".jpg";
}
3rd Div:
function displayImage(image) {
document.getElementById(**"img3"**).src = image;
}
function displayNextImage() {
x = (x == images.length - 1) ? 0 : x + 1;
displayImage(images[x]);
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
displayImage(images[x]);
}
function startTimer() {
setInterval(displayNextImage, 1000);
}
var images = [], x = -1;
images[0] = **"pictures9/"** + "1.jpg";
images[1] = **"pictures9/"** + "2.jpg";
for(var y=2;y<4;y++){
images[y]= **"pictures9/"** + (y+1) + ".jpg";
}
Again, Only the image with id of "img3.jpg" is working... is it canceling the other code? should i use Jquery or some other code? Please help me.
