Automatic News Slider CSS & jQuery Simple News Slider Tutorial jQuery Slider jQuery News Rotator

Introduction

I really love jquery. Today I just built another module for the visinia CMS. This module slides the blog posts and news automatically. The news slider module is completely built with jquery and CSS.

The code is so simple that I wanted to share it with my friends here.

The dynamic webpage, the dynamic controls, every webpage now on the web has some kind of JavaScript added to it. So to add the dynamics to the visinia CMS modules, I just added a news slider. 

The code is very simple.

HTML

<DIV class=Rotator>
<H2>Posts Rotator</H2>
<UL>
<LI>
<A href="http://www.codeproject.com title</A> 
<LI>
<A href="http://www.microsoft.com title</A> 
<LI>
<A href="http://www.visinia.com title</A> 
<LI>
<A href="http://www.visinia.com title</A> 
</LI></UL> 
</DIV> 

CSS

.Rotator
{
margin: 5px 5px 5px 20px;
}

.Rotator h2
{
padding: 0px;
margin: 0px 10px 0px 0px;
float: left;
color: #FFFFFF;
font-size: 12px;
}

.Rotator ul
{
}

.Rotator ul li
{
display: inline;
height: 10px;
}

.Rotator ul li a
{
color: #FFFFFF;
} 

JQuery

$(function(){ 
$('.Rotator ul li').hide();
$('.Rotator ul li:first').show(); 
Rotate();
});

function Rotate(){
var current = $('.Rotator ul li:visible');
var next = current.next().length ? current.next() : current.parent().children(':first'); 
current.hide();
next.show();
setTimeout(Rotate, 5000);
} 

Prerequisite

You need to download the jquery.js from their website. The other option might be to use the file hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

More Information

Please see www.visinia.com.

History

• 4^th July, 2010: Initial post