Version complète: jsB@nk » Framework » jQuery » Simple Auto Image Rotator avec jQuery
URL: https://www.javascriptbank.com/simple-auto-image-rotator-with-jquery.html
Il s'agit d'un exemple de code simple JavaScript pour faire pivoter vos images en continu Cet exemple de code jQuery utilise les effets de flou pour les animations des transitions d'image Un exemple de code JavaScript tr?s facile ? utiliser
Version complète: jsB@nk » Framework » jQuery » Simple Auto Image Rotator avec jQuery
URL: https://www.javascriptbank.com/simple-auto-image-rotator-with-jquery.html
<style type="text/css">/* rotator in-page placement */ div#rotator {position:relative;height:345px;margin-left: 15px;}/* rotator css */div#rotator ul li {float:left;position:absolute;list-style: none;}/* rotator image style */div#rotator ul li img {border:1px solid #ccc;padding: 4px;background: #FFF;} div#rotator ul li.show {z-index:500}</style><script type="text/javascript" src="/javascript/jquery.js"></script><!-- By Dylan Wagstaff, http://www.alohatechsupport.net --><script type="text/javascript">function theRotator() {//Set the opacity of all images to 0$('div#rotator ul li').css({opacity: 0.0});//Get the first image and display it (gets set to full opacity)$('div#rotator ul li:first').css({opacity: 1.0});//Call the rotator function to run the slideshow, 6000 = change to next image after 6 secondssetInterval('rotate()',6000);}function rotate() {//Get the first imagevar current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));//Get next image, when it reaches the end, rotate it back to the first imagevar next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));//Set the fade in effect for the next image, the show class has higher z-indexnext.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);//Hide the current imagecurrent.animate({opacity: 0.0}, 1000).removeClass('show');};$(document).ready(function() {//Load the slideshowtheRotator();});</script><div id="rotator"> <ul> <li class="show"><a href="http://www.alohatechsupport.net/webdesignmaui/"><img src="image-1.jpg" width="500" height="313" alt="pic1" /></a></li> <li><a href="http://www.alohatechsupport.net/"><img src="image-2.jpg" width="500" height="313" alt="pic2" /></a></li> <li><a href="http://www.alohatechsupport.net/mauiwebdesign.html"><img src="image-3.jpg" width="500" height="313" alt="pic3" /></a></li> <li><a href="http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html"><img src="image-4.jpg" width="500" height="313" alt="pic4" /></a></li> </ul></div>
/javascript/jquery.js/javascript/framework/Simple_Auto_Image_Rotator_with_jQuery/image-1.jpg/javascript/framework/Simple_Auto_Image_Rotator_with_jQuery/image-2.jpg/javascript/framework/Simple_Auto_Image_Rotator_with_jQuery/image-3.jpg/javascript/framework/Simple_Auto_Image_Rotator_with_jQuery/image-4.jpg