上次博客写了写个图片轮播的效果感觉只是实现了功能，在扩展性有些问题；经过许久研究和借鉴，升级版的图片轮播面世了。相对来说功能和可拓展性都得到了极大地提升；而且封装的很好，直接调用函数并传参数就可以使用。废话少说，直接上源码。
inde.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>升级版图片轮播</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="../jquery/jquery-1.8.3.min.js"></script>
<script language="JavaScript" src="scroll.js"></script>
<script>
$(document).ready(function(){
//根据需要产不同的参数
FeatureList(".f_list",{"onclass":"hover","offclass":"","pause_on_act":"click","interval":5000,"speed":5});
});
</script>
</head>
<body>
<div class="showpage">
<div class="mainbody">
<div class="flashbox f_list">
<div class="focusNew_out flashlist">
<div style="display:block;" class="f_out">
<span class="f_out_txt"><a href=" " target="_blank" title="专访徐峥>专访徐峥</a></span>
<a target="_blank" href=""><img width="706" height="398" alt="专访徐峥" title="专访徐峥" src="p_w_picpath/1.jpg"></a>
</div>
<div style="display:none;" class="f_out">
<span class="f_out_txt"><a href=" " target="_blank" title="电影时光机 《泰坦尼克号》">电影时光机 《泰坦尼克号》</a></span>
<a target="_blank" href=" "><img width="706" height="398" alt="电影时光机 《泰坦尼克号》" title="电影时光机 《泰坦尼克号》" src="p_w_picpath/2.jpg"></a>
</div>
<div style="display:none;" class="f_out">
<span class="f_out_txt"><a href=" " target="_blank" title="好莱坞圣诞档菜单曝光 ">好莱坞圣诞档菜单曝光 </a></span>
<a target="_blank" href=" "><img width="706" height="398" alt="好莱坞圣诞档菜单曝光" title="好莱坞圣诞档菜单曝光" src="p_w_picpath/3.jpg"></a>
</div>
<div style="display:none;" class="f_out">
<span class="f_out_txt"><a href=" " target="_blank" title="大电影有看头">大电影有看头 圆乱世英雄梦</a></span>
<a target="_blank" href=" "><img width="706" height="398" alt="大电影有看头" title="大电影有看头" src="p_w_picpath/4.jpg"></a>
</div>
<div style="display:none;" class="f_out">
<span class="f_out_txt"><a href=" " target="_blank" title="用数字聊电影">用数字聊电影</a></span>
<a target="_blank" href=" "><img width="706" height="398" alt="用数字聊电影" title="用数字聊电影" src="p_w_picpath/5.jpg"></a>
</div>
</div>
<div class="f_tabs">
<span class="f_tab hover">1</span>
<span class="f_tab ">2</span>
<span class="f_tab ">3</span>
<span class="f_tab ">4</span>
<span class="f_tab ">5</span>
</div>
</div>
</html>
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}
大功告成，请笑纳。
