Full version: jsB@nk » Framework » jQuery » Simple Auto Image Rotator with jQuery
URL: https://www.javascriptbank.com/simple-auto-image-rotator-with-jquery.html
This is a simple JavaScript code example to rotate your pictures continuously. This jQuery code example uses the blur effects for the animations of picture transitions. A very easy JavaScript code example to use.
Full version: jsB@nk » Framework » jQuery » Simple Auto Image Rotator with 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