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">
 $(document).ready(function(){
 $('#<em><strong>imagediv</strong></em>').cycle({
 fx:    'fade',
 speed:  2500
 });
 });
 </script>

<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" />
 </div>
  1. Download jquery.js from http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
  2. Download jquery.cycle.all.js from http://malsup.github.com/jquery.cycle.all.js
  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 http://jquery.malsup.com/cycle for more option & customization jQuery cycle plugin.

Thats it ..

Done.. Enjoy !!!

Advertisements

I like to hear from you about this !!

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s