Phiên bản đầy đủ: jsB@nk » Framework » jQuery » JavaScript chuyển ảnh đơn giản với jQuery
URL: https://www.javascriptbank.com/simple-auto-image-rotator-with-jquery.html
Một hiệu ứng JavaScript đơn giản sử dụng thư viện jQuery để thực hiện việc thay đổi ảnh liên tục. Hiệu ứng mờ dần được sử dụng để hiển thị giữa các ảnh, bạn có thể dễ dàng thay đổi các hoạt hóa của hiệu ứng này với các hàm có sẵn của jQuery.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » JavaScript chuyển ảnh đơn giản với 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