JQUERY FADE BANNER (ADB14)


Banners are good for attracting attention and being extensively used in advertising field. Most of these are either from Google or from other ad marketing companies. For getting these codes, we have to depend on the third party plugins which is not at all good. Here, I have prepared the code which will be better to put in your blog/website without any plugin.
View the auto demo - ADB14 ( Also view the banner list here)

Design Banner in your own way.
Get more traffic and publishers.
Still doubt, please do contact:
www.freemenu.info
Each line appears in delay animation (3 Sec).
After all lines, pause for some period(3 Sec).
No need to download the Jquery(Google libraries)

CSS CODE (in header):
.ns_box.ns_sky-light{ border:#bbd9ef solid 1px; background:#f5fffa; } #quotes { margin: 0; font-size: 20px; position: relative; } .textItem { position: absolute; display: none; } a { color: #000; font-size: 15px; }
SCRIPT CODE (in header):
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { setupRotator(); }); function setupRotator() { if ($('.textItem').length > 1) { $('.textItem:first').addClass('current').fadeIn(2000); setInterval('textRotate()', 2500); } } function textRotate() { var current = $('#quotes > .current'); if (current.next().length == 0) { current.removeClass('current').fadeOut(1000); $('.textItem:first').addClass('current').fadeIn(1000); } else { current.removeClass('current').fadeOut(1000); current.next().addClass('current').fadeIn(1000); } } </script>
HTML CODE (in body):
<div class="ns_box ns_sky-light" style="margin: 0; padding: 20px 2px 10px 5px; width: 250px; height: 60px; "> <div id="quotes"> <div class="textItem">Design Banner in your own way.</div> <div class="textItem">Get more traffic and publishers.</div> <div class="textItem">Still doubt, please do contact:</div> <div class="textItem">www.freemenu.info</div> </div></div>

No comments:

Click Here To add Comment

Post a Comment