LinuxQuestions.org
Welcome to the most active Linux Forum on the web.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 06-08-2016, 01:06 PM   #1
gacl
Member
 
Registered: Feb 2004
Posts: 64

Rep: Reputation: 23
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.
 
Old 06-08-2016, 01:48 PM   #2
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,552

Rep: Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872
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
 
Old 06-08-2016, 06:44 PM   #3
gacl
Member
 
Registered: Feb 2004
Posts: 64

Original Poster
Rep: Reputation: 23
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"?
 
Old 06-10-2016, 08:16 AM   #4
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,552

Rep: Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872
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

Last edited by keefaz; 06-10-2016 at 08:20 AM.
 
Old 06-17-2016, 11:16 AM   #5
gacl
Member
 
Registered: Feb 2004
Posts: 64

Original Poster
Rep: Reputation: 23
So if I have 5 elements, they will be 0, 1, 2, 3, and 4 in this loop?
 
Old 06-17-2016, 12:03 PM   #6
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,552

Rep: Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872
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
 
Old 06-19-2016, 08:34 AM   #7
gacl
Member
 
Registered: Feb 2004
Posts: 64

Original Poster
Rep: Reputation: 23
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.
 
Old 06-19-2016, 10:17 AM   #8
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,552

Rep: Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872Reputation: 872
http://www.w3schools.com/js/js_loop_for.asp
 
Old 06-19-2016, 10:48 AM   #9
AnanthaP
Member
 
Registered: Jul 2004
Location: Chennai, India
Posts: 952

Rep: Reputation: 217Reputation: 217Reputation: 217
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
 
Old 08-23-2016, 10:39 AM   #10
gacl
Member
 
Registered: Feb 2004
Posts: 64

Original Poster
Rep: Reputation: 23
Thanks all for your help. I'll get this someday.

Solved
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
gitweb dont show css javascript etc... -Snake- Linux - Server 1 03-01-2016 06:52 AM
Are HTML, JavaScript and CSS all related? punchy71 Programming 5 05-05-2015 12:21 AM
How to do a slideshow of images in Javascript? resetreset Programming 4 06-28-2011 10:34 AM
The best HTML/CSS/JavaScript book? christianunix Linux - Newbie 1 04-03-2009 10:18 PM
Javascript/CSS mouseout question pnellesen Programming 2 02-26-2006 06:22 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 06:49 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration