LinuxQuestions.org

LinuxQuestions.org (/questions/)
-   Programming (https://www.linuxquestions.org/questions/programming-9/)
-   -   JavaScript: W3.CSS Slideshow. What's it doing? (https://www.linuxquestions.org/questions/programming-9/javascript-w3-css-slideshow-whats-it-doing-4175581780/)

gacl 06-08-2016 01:06 PM
JavaScript: W3.CSS Slideshow. What's it doing?
 
Hi,

I found this automatic slideshow that I want to use but I can't quite understand what is it doing:

Code:
var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
I get a lot of it but some parts, like the "(i = 0; i < x.length; i++)" leave me stumped. Could somebody explain this to me? Thanks.

keefaz 06-08-2016 01:48 PM
It is a standard loop you'll find in most programming languages

i is a counter variable, it starts at zero value; its value must be less than x.length value; i value is incremented by 1 for each loop iteration

gacl 06-08-2016 06:44 PM
Why can't i be x.length? I would think that if the next slide will be 1 then the last one has to be set to "none"?

keefaz 06-10-2016 08:16 AM
x.length is the length of x array, this array contains references to all elements that have .mySlides css classes in your html document
The loop sets css display property to none in each .mySlides css class

The array index starts at zero and ends at array.length -1, that's why i (= the array index) can't be greater than x.length

gacl 06-17-2016 11:16 AM
So if I have 5 elements, they will be 0, 1, 2, 3, and 4 in this loop?

keefaz 06-17-2016 12:03 PM
the index i would have 0, 1, 2, 3, and 4 value in the loop, yes
the html elements containing .mySlides css class would be x[0], x[1] etc

gacl 06-19-2016 08:34 AM
Thanks.

And why would I need i++, though? i = 0 takes care of 0 and x < x.length takes care of 1, 2, 3, and 4 in the case of 5 elements. It seems superfluous.

keefaz 06-19-2016 10:17 AM
http://www.w3schools.com/js/js_loop_for.asp

AnanthaP 06-19-2016 10:48 AM
The loop initializes all display attributes (style.display) of the mySlides class to none. (ie. hidden).

Since the scope of slideIndex is outside the function, it keeps the old value. So you need to increment it separately from "i" which initializes.

As a further exercise, consider:
Having initially initialized all displays to none, you don't really need to reinitialize all in every call to the function. You could have a variable called as "j" which holds the value of slideIndex before incrementing. Then you might change the code as:

Quote:
x[slideIndex-1].style.display = "block";
x[j].style.display = "none";
It needs to be tested for border conditions.

OK

gacl 08-23-2016 10:39 AM
Thanks all for your help. I'll get this someday.

Solved


All times are GMT -5. The time now is 10:21 PM.