首页>>Jquery图片>>类似水车旋转的图片组 banner(2014-05-11)

类似水车旋转的图片组 banner

 本例不支持鼠标滚动的，图片的透明度递减

类似水车旋转的图片组 banner
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="carousel">  
  2.       <img src="images/1.jpg" id="item-1" />  
  3.       <img src="images/2.jpg" id="item-2" />  
  4.       <img src="images/3.jpg" id="item-3" />  
  5.       <img src="images/4.jpg" id="item-4" />  
  6.       <img src="images/5.jpg" id="item-5" />  
  7.       <img src="images/6.jpg" id="item-6" />  
  8.       <img src="images/7.jpg" id="item-7" />  
  9.       <img src="images/8.jpg" id="item-8" />  
  10.       <img src="images/9.jpg" id="item-9" />  
  11.     </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.       $(document).ready(function () {  
  3.         var carousel = $("#carousel").waterwheelCarousel({  
  4.           flankingItems: 3,  
  5.           movingToCenter: function ($item) {  
  6.             $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');  
  7.           },  
  8.           movedToCenter: function ($item) {  
  9.             $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');  
  10.           },  
  11.           movingFromCenter: function ($item) {  
  12.             $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');  
  13.           },  
  14.           movedFromCenter: function ($item) {  
  15.             $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');  
  16.           },  
  17.           clickedCenter: function ($item) {  
  18.             $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');  
  19.           }  
  20.         });  
  21.   
  22.         $('#prev').bind('click', function () {  
  23.           carousel.prev();  
  24.           return false  
  25.         });  
  26.   
  27.         $('#next').bind('click', function () {  
  28.           carousel.next();  
  29.           return false;  
  30.         });  
  31.   
  32.         $('#reload').bind('click', function () {  
  33.           newOptions = eval("(" + $('#newoptions').val() + ")");  
  34.           carousel.reload(newOptions);  
  35.           return false;  
  36.         });  
  37.   
  38.       });  
  39.     </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_336.html