MovingBoxes-jquery图片滚动插件

发布于，归属于jquery插件。 前2个座位已被强势霸占！ 共有3,561人围观    

JQ图片滚动插件

点此下载
这个插件强力推荐，非常不错的一个插件。图片滚动的同时还有个放大特效，外加上标题和描述。可以说实用性非常的大。唯一的缺憾就是实际上作者的JS水平不算太高，代码可以说毫无封装。

使用方法：

建立如下html结构：

  1. <div id="slider">   
  2.  
  3.             <img class="scrollButtons left" src="images/leftarrow.png">
  4.  
  5.             <div style="overflow: hidden;" class="scroll">
  6.    
  7.                 <div class="scrollContainer">
  8.    
  9.                     <div class="panel" id="panel_1">
  10.                         <div class="inside">
  11.                             <img src="images/1.jpg" alt="picture" />
  12.                             <h2>News Heading</h2>
  13.                             <p>A very shot exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more link</a></p>
  14.                         </div>
  15.                     </div>
  16.  
  17.                     <div class="panel" id="panel_2">
  18.                         <div class="inside">
  19.                             <img src="images/2.jpg" alt="picture" />
  20.                             <h2>News Heading</h2>
  21.                             <p>A very shot exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more link</a></p>
  22.                         </div>
  23.                     </div>
  24.                
  25.                     <div class="panel" id="panel_3">
  26.                         <div class="inside">
  27.                             <img src="images/3.jpg" alt="picture" />
  28.                             <h2>News Heading</h2>
  29.                             <p>A very shot exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more link</a></p>
  30.                         </div>
  31.                     </div>
  32.                    
  33.                     <div class="panel" id="panel_4">
  34.                         <div class="inside">
  35.                             <img src="images/4.jpg" alt="picture" />
  36.                             <h2>News Heading</h2>
  37.                             <p>A very shot exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more link</a></p>
  38.                         </div>
  39.                     </div>
  40.                    
  41.                     <div class="panel" id="panel_5">
  42.                         <div class="inside">
  43.                             <img src="images/5.jpg" alt="picture" />
  44.                             <h2>News Heading</h2>
  45.                             <p>A very shot exerpt goes here... <a href="http://flickr.com/photos/fensterbme/499006584/">more link</a></p>
  46.                         </div>
  47.                     </div>
  48.                
  49.                 </div>
  50.  
  51.                 <div id="left-shadow"></div>
  52.                 <div id="right-shadow"></div>
  53.  
  54.             </div>
  55.  
  56.             <img class="scrollButtons right" src="images/rightarrow.png">
  57.  
  58.         </div>

貌似代码很多，实际上结构很简单。

来看其js部分

  1. $(function() {
  2.    
  3.     var totalPanels            = $(".scrollContainer").children().size();
  4.        
  5.     var regWidth            = $(".panel").css("width");
  6.     var regImgWidth            = $(".panel img").css("width");
  7.     var regTitleSize        = $(".panel h2").css("font-size");
  8.     var regParSize            = $(".panel p").css("font-size");
  9.    
  10.     var movingDistance        = 300;
  11.    
  12.     var curWidth            = 350;
  13.     var curImgWidth            = 326;
  14.     var curTitleSize        = "20px";
  15.     var curParSize            = "15px";
  16.  
  17.     var $panels                = $('#slider .scrollContainer > div');
  18.     var $container            = $('#slider .scrollContainer');
  19.  
  20.     $panels.css({'float' : 'left','position' : 'relative'});
  21.    
  22.     $("#slider").data("currentlyMoving", false);
  23.  
  24.     $container
  25.         .css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
  26.         .css('left', "-350px");
  27.  
  28.     var scroll = $('#slider .scroll').css('overflow', 'hidden');
  29.  
  30.     function returnToNormal(element) {
  31.         $(element)
  32.             .animate({ width: regWidth })
  33.             .find("img")
  34.             .animate({ width: regImgWidth })
  35.             .end()
  36.             .find("h2")
  37.             .animate({ fontSize: regTitleSize })
  38.             .end()
  39.             .find("p")
  40.             .animate({ fontSize: regParSize });
  41.     };
  42.    
  43.     function growBigger(element) {
  44.         $(element)
  45.             .animate({ width: curWidth })
  46.             .find("img")
  47.             .animate({ width: curImgWidth })
  48.             .end()
  49.             .find("h2")
  50.             .animate({ fontSize: curTitleSize })
  51.             .end()
  52.             .find("p")
  53.             .animate({ fontSize: curParSize });
  54.     }
  55.    
  56.     //direction true = right, false = left
  57.     function change(direction) {
  58.       
  59.         //if not at the first or last panel
  60.         if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }   
  61.        
  62.         //if not currently moving
  63.         if (($("#slider").data("currentlyMoving") == false)) {
  64.            
  65.             $("#slider").data("currentlyMoving", true);
  66.            
  67.             var next         = direction ? curPanel + 1 : curPanel - 1;
  68.             var leftValue    = $(".scrollContainer").css("left");
  69.             var movement     = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
  70.        
  71.             $(".scrollContainer")
  72.                 .stop()
  73.                 .animate({
  74.                     "left": movement
  75.                 }, function() {
  76.                     $("#slider").data("currentlyMoving", false);
  77.                 });
  78.            
  79.             returnToNormal("#panel_"+curPanel);
  80.             growBigger("#panel_"+next);
  81.            
  82.             curPanel = next;
  83.            
  84.             //remove all previous bound functions
  85.             $("#panel_"+(curPanel+1)).unbind();   
  86.            
  87.             //go forward
  88.             $("#panel_"+(curPanel+1)).click(function(){ change(true); });
  89.            
  90.             //remove all previous bound functions                                                           
  91.             $("#panel_"+(curPanel-1)).unbind();
  92.            
  93.             //go back
  94.             $("#panel_"+(curPanel-1)).click(function(){ change(false); });
  95.            
  96.             //remove all previous bound functions
  97.             $("#panel_"+curPanel).unbind();
  98.         }
  99.     }
  100.    
  101.     // Set up "Current" panel and next and prev
  102.     growBigger("#panel_3");   
  103.     var curPanel = 3;
  104.    
  105.     $("#panel_"+(curPanel+1)).click(function(){ change(true); });
  106.     $("#panel_"+(curPanel-1)).click(function(){ change(false); });
  107.    
  108.     //when the left/right arrows are clicked
  109.     $(".right").click(function(){ change(true); });   
  110.     $(".left").click(function(){ change(false); });
  111.    
  112.     $(window).keydown(function(event){
  113.       switch (event.keyCode) {
  114.             case 13: //enter
  115.                 $(".right").click();
  116.                 break;
  117.             case 32: //space
  118.                 $(".right").click();
  119.                 break;
  120.         case 37: //left arrow
  121.                 $(".left").click();
  122.                 break;
  123.             case 39: //right arrow
  124.                 $(".right").click();
  125.                 break;
  126.       }
  127.     });
  128.    
  129. });

有兴趣的朋友可以对其进行改造下。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

2个座位已被强势霸占！

  1. Pingback: 10+个jQuery图片滚动插件介绍 : 彼熊不及此熊

  2. Pingback: 老扬州 » 10+个jQuery图片滚动插件介绍

同类