Click here to Skip to main content
15,353,818 members
Articles / Web Development / HTML
Article
Posted 3 Jul 2010

Stats

86.6K views
25 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
20 Jul 2011CPOL
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

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

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

JavaScript
$(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.

JavaScript
<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 websites.
CNC Programming
CNC Manuals
DXF & GCode Files with Online Viewers
Komment.me

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.

Comments and Discussions

 
QuestionDoesn't Run Pin
Clinton Gallagher26-Jul-11 4:20
professionalClinton Gallagher26-Jul-11 4:20 
These articles should include a download of the running code so people do not have to waste time trying to figure out how to debug
clintonG

QuestionSecond element shows first Pin
Bjarne Havnen - CodePort AS20-Jul-11 2:32
MemberBjarne Havnen - CodePort AS20-Jul-11 2:32 

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

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