easyslider1.5插件(图片滚动)代码

(function($) {

 $.fn.easySlider = function(options){
  
  // default configuration properties
  var defaults = {   
   prevId:   'prevBtn',
         prevText:   'Previous',//上一页
         nextId:   'nextBtn',
         nextText:   'Next',//下一页
         controlsShow: true,//上一页，下一页按钮是否显示，默认为true，如果改为false滚动条滚动模式变为自动。
         controlsBefore: '',//默认为空，用于在控制按钮上增加自定义的HTML片段，controlsBefore为增加在按钮前面的代码
         controlsAfter: '', //controlsAfter为增加在按钮后面的代码.
         controlsFade: true,//默认为true，如果设置成false，滚动到最后一页的时候按钮不会消失。
         firstId:   'firstBtn',
         firstText:   'First',
         firstShow:  false,//是否显示第一页的按钮。
         lastId:   'lastBtn',
         lastText:   'Last',
         lastShow:  false, //是否显示最后一页的按钮
         vertical:  false,//是否垂直滚动
         speed:    800,//切换图片过程的时间（单位：毫秒）
         auto:   false,//当不进行任何操作时是否自动滚动，当进行操作后（如：点击下一张）将不会自己滚动
         pause:   2000,//等待pause毫秒才进行图片切换
         continuous:  false//设置为true时，滚动到最后一页后会跳到第一页继续滚动。
  };
  
  var options = $.extend(defaults, options); 
    
  this.each(function() { 
   var obj = $(this);     
   var s = $("li", obj).length;
   var w = $("li", obj).width();
   var h = $("li", obj).height();
   obj.width(w);
   obj.height(h);
   obj.css("overflow","hidden");
   var ts = s-1;
   var t = 0;
   $("ul", obj).css('width',s*w);   
   if(!options.vertical) $("li", obj).css('float','left');
   
   if(options.controlsShow){
    var html = options.controlsBefore;
    if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=/"javascript:void(0);/">'+ options.firstText +'</a></span>';
    html += ' <span id="'+ options.prevId +'"><a href=/"javascript:void(0);/">'+ options.prevText +'</a></span>';
    html += ' <span id="'+ options.nextId +'"><a href=/"javascript:void(0);/">'+ options.nextText +'</a></span>';
    if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=/"javascript:void(0);/">'+ options.lastText +'</a></span>';
    html += options.controlsAfter;      
    $(obj).after(html);          
   };
 
   $("a","#"+options.nextId).click(function(){  
    animate("next",true);
   });
   $("a","#"+options.prevId).click(function(){  
    animate("prev",true);    
   }); 
   $("a","#"+options.firstId).click(function(){  
    animate("first",true);
   });    
   $("a","#"+options.lastId).click(function(){  
    animate("last",true);    
   });  
   
   function animate(dir,clicked){
    var ot = t;    
    switch(dir){
     case "next":
      t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;      
      break;
     case "prev":
      t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
      break;
     case "first":
      t = 0;
      break;
     case "last":
      t = ts;
      break;
     default:
      break;
    }; 
    
    var diff = Math.abs(ot-t);
    var speed = diff*options.speed;      
    if(!options.vertical) {
     p = (t*w*-1);
     $("ul",obj).animate(
      { marginLeft: p },
      speed
     );    
    } else {
     p = (t*h*-1);
     $("ul",obj).animate(
      { marginTop: p },
      speed
     );     
    };
    
    if(!options.continuous && options.controlsFade){     
     if(t==ts){
      $("a","#"+options.nextId).hide();
      $("a","#"+options.lastId).hide();
     } else {
      $("a","#"+options.nextId).show();
      $("a","#"+options.lastId).show();     
     };
     if(t==0){
      $("a","#"+options.prevId).hide();
      $("a","#"+options.firstId).hide();
     } else {
      $("a","#"+options.prevId).show();
      $("a","#"+options.firstId).show();
     };     
    };    
    
    if(clicked) clearTimeout(timeout);
    if(options.auto && dir=="next" && !clicked){;
     timeout = setTimeout(function(){
      animate("next",false);
     },diff*options.speed+options.pause);
    };
    
   };
   // init
   var timeout;
   if(options.auto){;
    timeout = setTimeout(function(){
     animate("next",false);
    },options.pause);
   };  
  
   if(!options.continuous && options.controlsFade){     
    $("a","#"+options.prevId).hide();
    $("a","#"+options.firstId).hide();    
   };    
   
  });
  
 };

})(jQuery);

 

 

 

前台代码：s

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="easyslider1.5/easySlider1.5.js" type="text/javascript"></script>

    <script type="text/javascript">
     $(document).ready(function(){ 
      $("#slider").easySlider();
     }); 
    </script>

    <style>
        body
        {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }
        h1
        {
            font-size: 180%;
            font-weight: normal;
        }
        h2
        {
            font-size: 160%;
            font-weight: normal;
        }
        h3
        {
            font-size: 140%;
            font-weight: normal;
        }
        img
        {
            border: none;
        }
        pre
        {
            display: block;
            font: 12px "Courier New" , Courier, monospace;
            padding: 10px;
            border: 1px solid #bae2f0;
            background: #e3f4f9;
            margin: .5em 0;
            width: 500px;
        }
        /* Easy Slider */#slider ul, #slider li
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #slider li
        { 　width:696px;height:241px;overflow:hidden;}
        span#prevBtn
        {
        }
        span#nextBtn
        {
        }
    </style>
</head>
<body>
    <h1>
        图片滚动Jquery插件演示</h1>
    <h2>
        图片滚动对图像的非设计版本与默认设置</h2>
    <div id="slider">
        <ul>
            <li>
                <img src="images/01.jpg" alt="Css Template Preview" /></li>
            <li>
                <img src="images/02.jpg" alt="Css Template Preview" /></li>
            <li>
                <img src="images/03.jpg" alt="Css Template Preview" /></li>
            <li>
                <img src="images/04.jpg" alt="Css Template Preview" /></li>
            <li>
                <img src="images/05.jpg" alt="Css Template Preview" /></li>
        </ul>
    </div>　
</body>