上次博客写了写个图片轮播的效果感觉只是实现了功能，在扩展性有些问题；经过许久研究和借鉴，升级版的图片轮播面世了。相对来说功能和可拓展性都得到了极大地提升；而且封装的很好，直接调用函数并传参数就可以使用。废话少说，直接上源码。

inde.html

     
      
       升级版图片轮播
       
        
         
         
           
          
            
           
           
            
               
             
                  
              
                               
               
                            
                
                 
                  专访徐峥            
                  
                   
                                                 
                    
                                 
                     
                      
                       电影时光机 《泰坦尼克号》            
                       
                        
                                                      
                         
                                      
                          
                           
                            好莱坞圣诞档菜单曝光             
                            
                             
                                                           
                              
                                           
                               
                                
                                 大电影有看头 圆乱世英雄梦            
                                 
                                  
                                                                
                                   
                                                
                                    
                                     
                                      用数字聊电影            
                                      
                                       
                                                                         
                                        
                                                         
                                         
                                          1                
                                          
                                           2                
                                           
                                            3                
                                            
                                             4                
                                             
                                              5                

scroll.js

var FeatureList = function(fobj,options) {//轮播调用的函数  function feature_slide(nr) {    if (typeof nr == "undefined") {      nr = visible_idx + 1;      nr = nr >= total_items ? 0 : nr;//nr大于5，则从开始再计数    }    tabs.removeClass(onclass).addClass(offclass).filter(":eq(" + nr + ")").removeClass(offclass).addClass(onclass);//上一个移除样式，新增样式；当前移除旧样式和新增样式    output.stop(true, true).filter(":visible").hide();//立刻让当前显示图片隐藏掉    output.filter(":eq(" + nr + ")").fadeIn("slow",function() {    visible_idx = nr;     });  }  fobj = (typeof(fobj) == 'string')?$(fobj):fobj;  fobj = $(fobj).eq(0);  if(!fobj || fobj.size() == 0) return;  //轮询间隔  var options      = options || {};  var visible_idx  = options.startidx || 0;  var onclass = options.onclass || "current";  var offclass = options.offclass || "";  var speed = options.speed || 10000;  options.pause_on_act = options.pause_on_act || "click";  options.interval  = options.interval  || 50000;  var tabs = fobj.find(".f_tabs .f_tab");  var output = fobj.find(".f_out");  var total_items = tabs.length;   //初始设定  output.hide().eq( visible_idx ).fadeIn("slow");  tabs.eq( visible_idx ).addClass(onclass);  if (options.interval > 0) {    var timer = setInterval(function () {      feature_slide();    }, options.interval);    output.mouseenter(function() {clearInterval( timer );}).mouseleave(function() {clearInterval( timer );timer = setInterval(function () {feature_slide();}, options.interval);});    if (options.pause_on_act == "mouseover") {        tabs.mouseenter(function() {        clearInterval( timer );        var idx = tabs.index($(this));        feature_slide(idx);      }).mouseleave(function() {        clearInterval( timer );        timer = setInterval(function () {          feature_slide();        }, options.interval);      });    } else {        tabs.click(function() {        clearInterval( timer );        var idx = tabs.index($(this));        feature_slide(idx);      });    }  }}

还有样式表：style.css

body{line-height:20px;font-family: Verdana, Geneva,"宋体", Helvetica, sans-serif; font-size:12px;}a { color:#26211d; text-decoration: none;}a:hover { text-decoration: underline}.showpage{width:778px; margin:0 auto; text-align:center;}.showpage .flashbox{ width:706px; height:398px; float:left; position:relative; }.flashbox .focusNew_out{width:706px; height:398px; position:relative; z-index:2}.flashbox .focusNew_out .f_out_txt{ height:50px;width:536px; display:block; position:absolute; bottom:0; left:0; background-color:#000000; opacity:0.8; color:#d6d6d6; font-size:20px; font-family:"微软雅黑"; line-height:50px; padding:0 150px 0 20px; overflow:hidden}.flashbox .focusNew_out .f_out_txt a{color:#d6d6d6; }.flashbox .f_tabs{width:140px;height:35px;position:absolute;bottom:15px;right:0px;z-index:100;}.flashbox .f_tabs span{ width:23px; height:19px; background-color:#474747; float: left; margin-right:3px; text-align:center; color:#f0f0f0; margin-top:15px; cursor:pointer}.flashbox .f_tabs span.hover{ height:19px; background-color:#B51017; margin-top:0; padding-top:15px; cursor:pointer}

大功告成，请笑纳。