JS content rotator

I was working on a project today which needed some content rotation, well this is very easy to find on the net, but i was too lazy to search and i’ve put together a very simple content rotation class which utilizes the mootools accordion class.

Constructor accepts 4 argument :
Wrapper, Handlers, Elements, Options

Use the same options that u used in mootools Accordion class but with one argument more which is: rotatorDuration which has default value of 2500

And there are two new Events:
onRotatorStart, onRotatorStop

onRotatorStart fires when the cursor leaves the Wrapper and onRotatorStop fires when mouse enters the wrapper

To recreate this demo you will need mootools, The class itself and the codes below.

News 1 News 2 News 3 News 4 News 5

News 1 Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.

News 2 Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.

News 3 Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.

News 4 Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.

News 5 Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.

JS Code

var rotate = new rotator($("rotator"),$$(".rotatorTitle"),$$(".rotatorContent"), {
 
		onActive:function(toggler) {
			toggler.setStyle("font-weight","bold");
		},
 
		onBackground:function(toggler) {
			toggler.setStyle("font-weight","normal");
		},
		rotatorDuration:2500,
		duration:1000,
		transition:Fx.Transitions.Bounce.easeOut
 
});

HTML code

<div>
	<span class="rotatorTitle">News 1</span> <span class="rotatorTitle">News 2</span> <span class="rotatorTitle">News 3</span> <span class="rotatorTitle">News 4</span> <span class="rotatorTitle">News 5</span><br/><br/>
	<div class="rotatorContent">
		<strong>News 1 Content</strong><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.
	</div>
	<div class="rotatorContent">
		<strong>News 2 Content</strong><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.
	</div>
	<div class="rotatorContent">
		<strong>News 3 Content</strong><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.
	</div>
	<div class="rotatorContent">
		<strong>News 4 Content</strong><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.
	</div>
	<div class="rotatorContent">
		<strong>News 5 Content</strong><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel nisi sit amet ligula pulvinar dignissim. Cras felis dolor, venenatis at, tincidunt at, sodales sit amet, nisi. Nulla nec mauris.
	</div>				
</div>

CSS code

#rotator {
	background-color: #E7E7E7;
	width:320px;
	height:200px;
}
 
#rotator .rotatorTitle {
	cursor:pointer;
	background-color: #F7F7F7;
	border-bottom:1px solid #cccccc;
	border-right:1px solid #cccccc;
	border-top:1px solid #e7e7e7;
	border-left:1px solid #e7e7e7;
	padding:2px 5px;
 
}
 
#rotator .rotatorContent {
	width:300px;
}

Share:

content rotation

JavaScript

mootools

This entry was posted on Monday, November 12th, 2007 at 7:46 am and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

David

on March 17th, 2008 at 2:14 pm

this is script is a good example of what I would like to do. I was wondering if it is possible to do the same things this script does except have it only rotate through the content “set” once?

Thanks

craig

on August 19th, 2008 at 5:45 pm

I’ve tried to get this script to work with mootools 1.2 but I’m having problems, can you help?