javascript - Fade in and Out on Slider Image -
i trying have slider images fade 1 opposed fading background, , loading next image.
the slider can seen @ http://bit.ly/vbfq2w
this have
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); <div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item" id="nav-fragment-1"> <a href="#fragment-1"><span>cloud<br />services</span></a> </li> <li class="ui-tabs-nav-item" id="nav-fragment-2"> <a href="#fragment-2"><span>it & network<br />support</span></a> </li> <li class="ui-tabs-nav-item" id="nav-fragment-3"> <a href="#fragment-3"><span>security</span></a> </li> <li class="ui-tabs-nav-item" id="nav-fragment-4"> <a href="#fragment-4"><span>service 4</span></a> </li> </ul> <!-- first content --> <div id="fragment-1" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="brash concepts | image not found" width="700" height="320" /> </div> <!-- sec content --> <div id="fragment-2" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="brash concepts | image not found" width="700" height="320"/> </div> <!-- 3rd content --> <div id="fragment-3" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="brash concepts | image not found" width="700" height="320"/> </div> <!-- 4th content --> <div id="fragment-4" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="brash concepts | image not found" width="700" height="320"/> </div> </div>
you can utilize flexslider create slider. every slides positionned 1 on other when alter slide, there "cross fade" between them.
here's code illustration of seek :
<!-- place somewhere in <body> of page --> <div class="flex-controls"></div> <div class="flexslider"> <ul class="slides"> <li> <img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="brash concepts | image not found" width="700" height="320" /> </li> <li> <img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="brash concepts | image not found" width="700" height="320" /> </li> <li> <img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="brash concepts | image not found" width="700" height="320" /> </li> <li> <img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="brash concepts | image not found" width="700" height="320" /> </li> </ul> </div> <!-- place in <head>, after 3 links --> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider( pauseonaction: false, pauseonhover: true, slideshowspeed: 5000, controlscontainer: '.flex-controls' //you utilize custom controls ); }); </script> javascript jquery slider fading
No comments:
Post a Comment