There are many useful jQuery plugins available to download free on the Internet. Almost everything you think of is already available. Banners rotation is a very common way to display banners on a single location on a web page. When visitors find a banner interesting, they click on it, and it will go to the url of the banner.
You should find a lot of similar jQuery plugins for banner rotation. Today, I am going to use jQuery InnerFade to do a banner rotation effect. The final effect is shown as below:
Using jQuery InnerFade plugins for banner rotation is very simple. The file of the above jQuery banner rotation example is shown as below:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>>Using jQuery InnerFade for Banners Rotation</title> <link rel="stylesheet" href="jquery-innerfade/reset.css" type="text/css" media="all" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-innerfade/jquery.innerfade.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('ul#bannerShow').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '60px' }); }); </script> <style type="text/css" media="screen, projection">@import url(jquery-innerfade/jq_fade.css);</style> </head> <body> <h3 style="padding-left:20px; text-align:left;">jQuery InnerFade Banner Rotation</h3> <div style="padding-left:20px;"> <ul id="bannerShow"> <li> <a href="http://www.gobiznow.com"><img src="images/pic1.jpg" alt="Picture 1" /></a> </li> <li> <a href="http://www.keepfast.com"><img src="images/pic2.jpg" alt="Picture 2" /></a> </li> <li> <a href="http://www.flashwonderland.com"><img src="images/pic3.jpg" alt="Picture 3" /></a> </li> <li> <a href="http://www.3tic.com"><img src="images/pic4.jpg" alt="Picture 4" /></a> </li> <li> <a href="http://www.hkmz.com"><img src="images/pic5.jpg" alt="Picture 5" /></a> </li> </ul> </div> </body> </html>
Unlike other jQuery plugins, InnerFade is very easy to use. The banners are simply a normal HTML listing.
Leave a Reply