Slideshow Class Control
My development work to produce a slideshow that had full control continues.
So far I have a manual and an automatic version but I am struggling to get the controls to work in all cases. Here I will set out the classes and the functions that I currently use for both.
The automatic show uses the carousel function and support functions
The manual show uses the showslides function
They are very similar, both include code to "wrap-around" the images when the array comes to an end. The functions that control the looping through the arrays of images (different classes) are similar but the automatic carousel function is controlled by a setTimeOut()
The Script for the carousel():
* The control methods for the carousel function
<script>
var myIndex = 0;
var output = document.getElementById("interval");
var y = 2000;
var z = 0;
carousel();
function setIntervalf() {
y = y-1000 ;
output.innerHTML = "Interval " + y/1000 + " Seconds";
}
function setIntervals() {
y = y+1000 ;
output.innerHTML = " Interval " + y/1000 + " Seconds";
}
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, y);
}
</script>
This script controls the class mySlides
The myslides2 contol:
The Script for the manual slideshow:
<script>
var slideIndex = 0;
plusSlides(1);
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides2");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
</script>
The setTimeout() method
The carousel() function is controlled by a setTimeout() call. I should be able to stop the execution by the use of the clearTimeout() method.
This is best experimented with a new page with just a simple automatic slideshow.