(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>
