I am adding autoplay of images in a Simple Slider in Javascript on the following site:
http://rastastation.com/rastaradio.html
The featured images do move to previous image and next image on the onClick Event. However I need to add a button for autoplaying the images in the slider. I need assistance.
I did research it and can see that you can use a custom function associated with the startTimer() Function. However, I don't quite understand how to integrate the syntax shown in other reference postings.
Is there an easy solution to add an onClick handler to a function called displayAutoplay().
Please provide feedback and an eased solution.
</script>
<script type = "text/javascript">
function displayImage(image) {
document.getElementById("img").src = image;
}
function displayNextImage() {
x = (x == images.length - 1) ? 0 : x + 1;
clearInterval(timer);
displayImage(images[x]);
timer = setInterval( displayThisImage, 5000 );
}
function displayThisImage( ) {
x = (x == images.length - 1) ? 0 : x + 1;
displayImage(images[x]);
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
clearInterval(timer);
displayImage(images[x]);
timer = setInterval( displayThisImage, 5000 );
}
function startTimer() {
timer = setInterval( displayThisImage, 5000 );
}
var images = [], x = -1;
var timer ;
images[0] = "http://rastastation.com/images/carousel_anthonyb2.png";
images[1] = "http://rastastation.com/images/carousel_capleton2.png";
images[2] = "http://rastastation.com/images/carousel_sizzla2.png";
images[3] = "http://rastastation.com/images/carousel_earlsixteen.png";
images[4] = "http://rastastation.com/images/carousel_norrisreid.png";
images[5] = "http://rastastation.com/images/carousel_yamibolo2.png";
images[6] = "http://rastastation.com/images/carousel_fantanmojah2.png";
images[7] = "http://rastastation.com/images/carousel_natural_black2.png";
images[8] = "http://rastastation.com/images/carousel_admiraltibet.png";
images[9] = "http://rastastation.com/images/carousel_luciano.png";
</script>
</head>
HTML
Thanks...William
Does this look like a good solution? Or are there better solutions?
</script>
<script type = "text/javascript">
function displayImage(image) {
document.getElementById("img").src = image;
}
function displayNextImage() {
x = (x == images.length - 1) ? 0 : x + 1;
clearInterval(timer);
displayImage(images[x]);
timer = setInterval( displayThisImage, 5000 );
}
function displayThisImage( ) {
x = (x == images.length - 1) ? 0 : x + 1;
displayImage(images[x]);
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
clearInterval(timer);
displayImage(images[x]);
timer = setInterval( displayThisImage, 5000 );
}
function startTimer() {
timer = setInterval( displayThisImage, 5000 );
}
var images = [], x = -1;
var timer ;
images[0] = "http://rastastation.com/images/carousel_anthonyb2.png";
images[1] = "http://rastastation.com/images/carousel_capleton2.png";
images[2] = "http://rastastation.com/images/carousel_sizzla2.png";
images[3] = "http://rastastation.com/images/carousel_earlsixteen.png";
images[4] = "http://rastastation.com/images/carousel_norrisreid.png";
images[5] = "http://rastastation.com/images/carousel_yamibolo2.png";
images[6] = "http://rastastation.com/images/carousel_fantanmojah2.png";
images[7] = "http://rastastation.com/images/carousel_natural_black2.png";
images[8] = "http://rastastation.com/images/carousel_admiraltibet.png";
images[9] = "http://rastastation.com/images/carousel_luciano.png";
</script>
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.