基于jquery的图片滚动插件代码

http://www.mzoe.com/demo/jquery/marquee/

下载地址：

http://www.mzoe.com/Public/JS/jquery/jquery.marquee.js

插件代码：

   1. (function($) { 
   2.     $.fn.marquee = function(o) { 
   3.         //获取滚动内容内各元素相关信息 
   4.         o = $.extend({ 
   5.             speed:      parseInt($(this).attr('speed')) || 30, // 滚动速度 
   6.             step:       parseInt($(this).attr('step')) || 1, // 滚动步长 
   7.             direction:  $(this).attr('direction') || 'up', // 滚动方向 
   8.             pause:      parseInt($(this).attr('pause')) || 1000 // 停顿时长 
   9.         }, o || {}); 
  10.         var dIndex = jQuery.inArray(o.direction, ['right', 'down']); 
  11.         if (dIndex > -1) { 
  12.             o.direction = ['left', 'up'][dIndex]; 
  13.             o.step = -o.step; 
  14.         } 
  15.         var mid; 
  16.         var div         = $(this); // 容器对象 
  17.         var divWidth    = div.innerWidth(); // 容器宽 
  18.         var divHeight   = div.innerHeight(); // 容器高 
  19.         var ul          = $("ul", div); 
  20.         var li          = $("li", ul); 
  21.         var liSize      = li.size(); // 初始元素个数 
  22.         var liWidth     = li.width(); // 元素宽 
  23.         var liHeight    = li.height(); // 元素高 
  24.         var width       = liWidth * liSize; 
  25.         var height      = liHeight * liSize; 
  26.         if ((o.direction == 'left' && width > divWidth) ||  
  27.             (o.direction == 'up' && height > divHeight)) { 
  28.             // 元素超出可显示范围才滚动 
  29.             if (o.direction == 'left') { 
  30.                 ul.width(2 * liSize * liWidth); 
  31.                 if (o.step < 0) div.scrollLeft(width); 
  32.             } else { 
  33.                 ul.height(2 * liSize * liHeight); 
  34.                 if (o.step < 0) div.scrollTop(height); 
  35.             } 
  36.             ul.append(li.clone()); // 复制元素 
  37.             mid = setInterval(_marquee, o.speed); 
  38.             div.hover( 
  39.                 function(){clearInterval(mid);}, 
  40.                 function(){mid = setInterval(_marquee, o.speed);} 
  41.             ); 
  42.         } 
  43.         function _marquee() { 
  44.             // 滚动 
  45.             if (o.direction == 'left') { 
  46.                 var l = div.scrollLeft(); 
  47.                 if (o.step < 0) { 
  48.                     div.scrollLeft((l <= 0 ? width : l) + o.step); 
  49.                 } else { 
  50.                     div.scrollLeft((l >= width ? 0 : l) + o.step); 
  51.                 } 
  52.                 if (l % liWidth == 0) _pause(); 
  53.             } else { 
  54.                 var t = div.scrollTop(); 
  55.                 if (o.step < 0) { 
  56.                     div.scrollTop((t <= 0 ? height : t) + o.step); 
  57.                 } else { 
  58.                     div.scrollTop((t >= height ? 0 : t) + o.step); 
  59.                 } 
  60.                 if (t % liHeight == 0) _pause(); 
  61.             } 
  62.         } 
  63.         function _pause() { 
  64.             // 停顿 
  65.             if (o.pause > 0) { 
  66.                 var tempStep = o.step; 
  67.                 o.step = 0; 
  68.                 setTimeout(function() { 
  69.                     o.step = tempStep; 
  70.                 }, o.pause); 
  71.             } 
  72.         } 
  73.     }; 
  74. })(jQuery); 
  75. $(document).ready(function(){ 
  76.     $(".marquee").each(function() { 
  77.         $(this).marquee(); 
  78.     }); 
  79. });

 调用代码：

   1. <div id="marquee">
   2.     <ul>
   3.         <li><img src="image/1.jpg" alt="1"></li>
   4.         <li><img src="image/2.jpg" alt="2"></li>
   5.         <li><img src="image/3.jpg" alt="3"></li>
   6.     </ul>
   7. </div>

   1. $(document).ready(function(){ 
   2.     $("#marquee").marquee({ 
   3.         direction: "left", 
   4.         step: 1, 
   5.         pause: 1000 
   6.     }); 
   7. });