Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, inside of the autoAdvance function, we are going to add a couple of different logic statements. The first thing we are going to do is put an if statement in here. I am going to type if, beginning and ending parentheses, beginning and ending bracket. Let's open that up. Now, inside of the if, inside of the parentheses, we are going to type window.timePassed, double equals to test the overall equality of that variable of timePassed, window.timeToChange.
So if the variable window.timePassed equals window.timeToChange, we want to run something inside up here. What we are going to do is we want to set window.timePassed back to 0. Then inside of here we are going to add another if statement. We are going to type if, beginning and ending parentheses, beginning and ending bracket, split that open. Inside of the if, the condition we want to happen here is window.currentPanel, double equals, window.totalPanels.
So, we want now the currentPanel equals the total number of panels. This will let us know that we are on the actual last panel. We are going to set currentPanel=0. So, that ends this first condition inside of the condition timePassed=window.timeToChange. We are going to add a second condition within the timePassed=timeToChange. We are going to type if, beginning and ending parentheses, beginning and ending bracket. Let's close that up. This condition is going to be autoPlay == true.
So, if autoPlay equals true then what we want to do is change the state of the marquee. So, what we are going to do now is write a jQuery statement that is going to in a sense automatically click one of those navigation buttons. So, it will be as if the user clicked it, but we are actually going to click it through the script. So, we are going to star with a dollar sign, beginning and ending parentheses, inside we are going to put two tick marks for string literal. We are going to type .marquee_nav a.marquee_nav_item.
This is going to lock onto the anchor tags with the marquee_nav_item class. Then we are going to put a colon, and then we are going to say nth-child, beginning and ending parentheses. Let's put an x in here for the moment. Then outside of the parentheses, we are going to hit .trigger, beginning and ending parentheses, semicolon, and then inside of the trigger function two tick marks. We are going to add a click.
So, by targeting one of the anchor tags inside of marquee_nav and setting the trigger event of a click, again we're basically auto clicking that link. Now, the x in here, we want to replace it with a variable. So, instead of the x, we are going to type two tick marks. Inside the tick marks, we are going to put two plus signs. We want to concatenate a string inside of here. And what we are going to do is come up here and grab window.currentPanel. Then we are going to add a +1 and we are going to put window.currentPanel and the +1 inside of another set of parentheses.
So, I'll close the script up a little bit. And now in the main if statement, we are going to type in else, and another beginning and ending bracket. So, this is the else statement of the original if statement. Let's come inside of the else statement and we are going to type window.timePassed += 1;. So, what this does is it auto increments the value of timePassed by 1.
So, the += means take the current value and add a 1 to it. Since the autoAdvance function, this entire function here, is going to run every second., ig the total timePassed=TimeToChange, then we know that we've satisfied the total duration or delay and we can reset this back to 0. I realize that has to be a lowercase. And then if the timePassed is not equal to timeToChange, we are going to add a 1 to it. So, this is going to be our little counter that's going to count up.
The last thing we are going to do in the script, let's copy two lines of debug code from below. Outside of the else statement, we are going to type the two debug statements and we are going to set the first one, timePassed, so that we update our debug area in our HTML. Make sure the second one is set to update the autoPlay. The one I copied and pasted already has it been there so I will just leave it. Now that that's done, let's choose File > Save All.
Let's go back to our HTML. Let's preview this in a browser. Let's hit Reload. So, now when we load the marquee, we will see that the timePassed variable is counting up. When timePassed euqals timeToChange, the autoAdvance happens. autoPlay is set to true at the top, currentPanel is set to 4, totalPanels = 4, and then when this runs again, it will set it back to 1, timePassed get set back to 0, and then it continues to count.
And in the next movie, we will set up a way to pause the autoPlay if the user wants to interact with the marquee.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.