jQuery InnerFade Plugins Banners Rotation

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

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>