Tutorial On Using setInterval To Make A jQuery Rotator

Tutorial On Using setInterval To Make A jQuery Rotator

A combination of things

I was tasked last week with building…well, I don’t know what the hell to call it, but at work we named it “the wheel.” Basically, it is a circle with a bunch of gray icons around it. I needed to get them to change to blue, show a larger graphic with additional content, and change to the next icon after a certain amount of time. When one of the icons is clicked though, the animation has to stop, and show whatever content goes with that icon. I used setInterval to accomplish the rotation through the icons, and pretty much the same jQuery I used on the Portfolio Content Gallery I wrote about. You’ll get a better idea of what I am talking about if you see it. I sped up the rotation so you don’t have to wait as long.

View Demo

I’m still learning Javascript/jQuery, and I have never used setInterval before, so this was a lesson for me as well. Turns out it is actually pretty easy, but I thought I would show you how to accomplish this so you don’t have to do any ridiculous searches like I did.

The HTML you need

There is not a lot to this, but seeing the structure will help. The only difference between this and the actual HTML I used is that there are eight content divs, where I am only showing one below. You can view all of the HTML in the demo.

<div id="wheelContainer">
	<div id="wheel">
		<div id="wheelOne" class="wheelIcon"><a href="#"></a></div>
		<div id="wheelTwo" class="wheelIcon"><a href="#"></a></div>
		<div id="wheelThree" class="wheelIcon"><a href="#"></a></div>
		<div id="wheelFour" class="wheelIcon"><a href="#"></a></div>
		<div id="wheelFive" class="wheelIcon"><a href="#"></a></div>
		<div id="wheelSix" class="wheelIcon"><a href="#"></a></div>
		<div id="wheelSeven" class="wheelIcon"><a href="#"></a></div>
		<div id="wheelEight" class="wheelIcon"><a href="#"></a></div>
	</div>
        <div id="wheelContentContainer">
		<div id="wheelOneContent" class="wheelContent">
			<div class="wheelLargeImage" id="wheelImage1"></div>
			<div class="wheelText">
				<p class="wheelHeading">Websites</p>
				<p>Content 1 goes here</p>
			</div>
		</div>
         </div>
</div>

The jQuery using setInterval

I’ll show you all of the jQuery I used, and then go through it line by line to explain what is going on.

$(document).ready(function() {
	var wheels = $('.wheelIcon');
        var content = $('.wheelContent');
 
	$('#wheel').delegate('div', 'click', function(){
		stopRotation();
		//change the background-position on x-axis so that they become blue icons
		wheels.removeClass('imageChange');
		$(this).addClass('imageChange');
 
 
		//Show or hide the content divs based on which icon is clicked
			$('.wheelContent').fadeOut().delay(500);
			$('.wheelContent').eq($(this).index()).fadeIn();	
	});
 
	function rotation() {
		rotateIcon = setInterval(nextIcon, 4000);
	}
 
	i = 0;
 
	function nextIcon() {
		wheels.removeClass('imageChange');
		$(wheels[i]).addClass('imageChange');
		$(content).fadeOut(1000).hide();
		$(content[i]).fadeIn();	
		if (i<7) {
			i++;	
		} else {
			i = 0;
		}
	};
 
	function stopRotation() {
		clearInterval(rotateIcon);
	}
 
	nextIcon();
	rotation();
});

Well, starting with the first line of the actual script, I’m declaring a variable for all the divs with the class ‘wheelIcon’. That way I am not typing so much later. Same thing with all the content divs. The next block deals with adding/removing a class, so that the icon changes from gray to blue when clicked. It is doing more than that of course.

$('#wheel').delegate('div', 'click', function(){
		stopRotation();
		//change the background-position on x-axis so that they become blue icons
		wheels.removeClass('imageChange');
		$(this).addClass('imageChange');
 
 
		//Show or hide the content divs based on which icon is clicked
			$('.wheelContent').fadeOut().delay(500);
			$('.wheelContent').eq($(this).index()).fadeIn();	
	});

I’m using delegate() so that there isn’t a ton of event handler’s flying around. It places the handler on the div with the id of ‘wheel’, and if any of the divs within it are clicked, it runs the function. One handler rather than eight. The next line is calling the function ‘stopRotation’ which clears the interval, but I’ll get to that.

So an icon is clicked, stops the rotation, and we get to the next couple of lines. It removes the class ‘imageChange’ from ALL of the icon divs, and adds it back on to the one that was clicked. The last piece in this section does kind of the same thing, but with the content divs. It fades out ALL the content divs, and fades in the one whose index value is equal to the index value of the icon that was clicked. Now on to the fun!

The home stretch – setInterval

function rotation() {
		rotateIcon = setInterval(nextIcon, 4000);
	}
 
	i = 0;
 
	function nextIcon() {
		wheels.removeClass('imageChange');
		$(wheels[i]).addClass('imageChange');
		$(content).fadeOut(1000).hide();
		$(content[i]).fadeIn();	
		if (i<7) {
			i++;	
		} else {
			i = 0;
		}
	};
 
	function stopRotation() {
		clearInterval(rotateIcon);
	}
 
	nextIcon();
	rotation();

I created three functions here. One to start the timed rotation, one to do what it should during the interval, and one to stop the rotation. The first starts it, and it is pretty simple. I gave it a name of ‘rotation’, and set a variable to setInterval with the parameters of another function, and a time period of 4 seconds. I set a variable of ‘i’ to ’0′, which I will use in the function I am passing into the setInterval.

The function ‘nextIcon’ does a lot of what the click event does. I remove the class ‘imageChange’ from every icon, the add it to the icon with an index value of ‘i’, which is zero the first time around. That means the first icon is blue right off the bat. I then fade out all the content divs, and fade in the one that has an index also equal to ‘i’, which at the start is again, zero.

if (i<7) {
i++;	
} else {
i = 0;
}

The above says if i is less than zero, add 1 to it, otherwise set ‘i’ back to zero. That keeps the rotation going after it gets finished. Just to note, I have eight content divs, but we are going by index value, which starts at 0, rather than 1.

The last section is the function that stops the rotation. All it does is clear the interval that is set in the rotation function.

Finally, I call the ‘nextIcon’ function to get it going, and then the ‘rotation’ function to set the interval.

Final thoughts on setInterval

I had always wanted to know how to do what I did with this little project, and it was cool to learn how to do it. I was surprised at how uncomplicated it actually is. The only hard part was doing a bit of ‘googling’ to figure some things out. Hopefully this little tutorial saves you some time and taught you something.

If you have used setInterval before, show us what you did!

Coupon Code: webmachine

Tags: ,

2 Responses to “Tutorial On Using setInterval To Make A jQuery Rotator”

  1. I think it’d be neat if the event was triggered on hover instead of on click. However, it’s worth noting that if you click on two buttons in quick succession, it gets a little screwy. Nothing that wouldn’t be too hard to fix. Pretty neat!

    • jcDesigns says:

      I’m pretty sure that is because of the time set on the fade. If I just did show/hide, then it wouldn’t be an issue. For what this was for, I don’t think people are going to click that fast.

      The hover would work, I would just have to restart the rotation when they moused out.

Leave a Reply