How to create an image rotator with jquery and css

Whenever you need to display random images (more than 1 image) ,
you can do it using simple jquery cycle plugin.

Here is the small explanation :-

<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.cycle.all.js"></script>
 <script type="text/javascript">
 fx:    'fade',
 speed:  2500

<div id="<em><strong>imagediv</strong></em>">
 <img src="image1.jpg"  alt="image1" />
 <img src="image2.jpg" alt="image2" />
 <img src="image3.jpg alt="image3" />
 <img src="image4.jpg  alt="image4" />
 <img src="image5.jpg alt="image5" />
  1. Download jquery.js from
  2. Download jquery.cycle.all.js from
  3. Include both .js files in header .
  4. add following CSS
    .pics {
    height: 117px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 354px;

There are many options to set time for fading effect & all..

You can refer for more option & customization jQuery cycle plugin.

Thats it ..

Done.. Enjoy !!!

I like to hear from you about this !!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.