Click here to Skip to main content
Click here to Skip to main content

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

, 20 Jul 2011
Rate this:
Please Sign up or sign in to vote.
Slides the blog posts and news automatically. The news slider is completely built with jquery and CSS.

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

  • 4th July, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

tanvon malik

Pakistan Pakistan
tanvon malik ( real name Tanveer Ahmad )I am a CNC Programmer, cnc setter, cnc operator. want to know about me visit my blog.
CNC Programming Blog
 
Reach Me
cnc blog | facebook | twitter | linkedin | flickr | google+
 
I been in Switzerland MAG former +FMS+ for CNC training.
 

Most interesting technologies I like COM MFC DirectShow such as filter development. I am from Pakistan.
Have worked on projects mostly related video capturing, video data processing and real time object tracking on videos. For these I have worked on projects which use "Open CV Library". Which is mostly used for capturing data and its processing.
 
my vc++ blog tanvon++
my blog about DirectShow in my national language URDU DirectShow.wordpress.com
and below is the place where we discuss DirectShow and VC++
http://groups.yahoo.com/group/tanvon
Follow on   Twitter

Comments and Discussions

 
QuestionDoesn't Run PinmemberclintonG26-Jul-11 4:20 
QuestionSecond element shows first PinmemberBjarne Havnen20-Jul-11 2:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140814.1 | Last Updated 20 Jul 2011
Article Copyright 2010 by tanvon malik
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid