jQuery 一个图片切换的插件

以下是参数说明：

参数名称	描述
delay	图片切换速度，单位毫秒
maskOpacity	遮罩层透明度，1为不透明，0为全透明
numOpacity	数字按钮透明度，1为不透明，0为全透明
maskBgColor	遮罩层背景色
textColor	标题字体颜色
numColor	数字按钮字体颜色
numBgColor	数字按钮背景色
alterColor	数字按钮选中项字体颜色
alterBgColor	数字按钮选中项背景颜色

插件代码及调用
- 插件名称：ImageScroll

(function($){ 
$.fn.ImageScroll = function(options) { 
var defaults = { 
delay: 2000, 
maskOpacity: 0.6, 
numOpacity: 0.6, 
maskBgColor: "#000", 
textColor: "#fff", 
numColor: "#fff", 
numBgColor: "#000", 
alterColor: "#fff", 
alterBgColor: "#999" 
}; 
options = $.extend(defaults, options); 
var _this = $(this).css("display", "none"); 
var _links = [], _texts = [], _urls = []; 
var _list = _this.find("a"); 
var _timer; 
var _index = 0; 
_list.each(function(index){ 
var temp = $(this).find("img:eq(0)"); 
_links.push($(this).attr("href")); 
_texts.push(temp.attr("alt")); 
_urls.push(temp.attr("src")); 
}); 
if(_list.length <= 0) { 
return; 
} 
else { 
_this.html(""); 
} 
var _width = _this.width(); 
var _height = _this.height(); 
var _numCount = _list.length; 
var _numColumn = Math.ceil(_numCount / 2); 
var _img = $("<a/>").css({"display":"block", "position":"absolute","top":"0px","left":"0px", "z-index":"2", "width":_width+"px", "height":_height+"px", "background":"url("+_urls[0]+")"}).appendTo(_this); 
var _mask = $("<div/>").attr("style","opacity:"+options.maskOpacity) 
.css({"position":"absolute", "left":"0px", "bottom":"0px", "z-index":"3", "width":_width+"px", "height":"46px", "opacity":options.maskOpacity, "background-color":options.maskBgColor}).appendTo(_this); 
var _num = $("<div/>").attr("style","opacity:"+options.numOpacity) 
.css({"position":"absolute", "right":"0px", "bottom":"0px", "z-index":"5", "width":_numColumn*22, "opacity":options.numOpacity, "height":"44px"}).appendTo(_this); 
var _text = $("<div/>").css({"position":"absolute", "left":"0px", "bottom":"0px", "z-index":"4", "padding-left":"10px", "height":"44px", "line-height":"44px", "color":options.textColor}).html(_texts[0]).appendTo(_this); 
for(var i = 0; i < _numCount; i++) 
{ 
$("<a/>").html(i+1) 
.css({"float":"left", "width":"20px", "height":"20px", "text-align":"center", "background-color":options.numBgColor, "margin":"0px 2px 2px 0px", "cursor":"pointer", "line-height":"20px", "color":options.numColor}) 
.mouseover(function() { 
if(_timer) { 
clearInterval(_timer); 
} 
}).mouseout(function() { 
_timer = setInterval(alter, options.delay); 
}).click(function(){ 
numClick($(this)); 
}).appendTo(_num); 
} 
var _tempList = _num.find("a"); 
function alter() { 
if(_index > _numCount-1) { 
_index = 0; 
} 
_tempList.eq(_index).click(); 
} 
function numClick(obj) { 
var i = _tempList.index(obj); 
_tempList.css({"background-color":options.numBgColor, "color":options.numColor}); 
obj.css({"background-color":options.alterBgColor, "color":options.alterColor}); 
_img.attr({"href":_links[i], "target":"_blank"}) 
.css({"opacity":"0", "background":"url("+_urls[i]+")"}) 
.animate({"opacity":"1"}, 500); 
_text.html(_texts[i]); 
_index = i + 1; 
} 
setTimeout(alter, 10); 
_timer = setInterval(alter, options.delay); 
_this.css("display", "block"); 
}; 
})(jQuery);

- 调用代码

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="js/jquery.ImageScroll.js" type="text/javascript"></script> 
<style type="text/css"> 
<!-- 
body { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 
#scroll { position:relative; width:450px; height:300px; } 
--> 
</style> 
<div id="scroll"> 
<a href="http://www.baidu.com"><img src="images/1.jpg" alt="漂亮的风景图片一" /></a> 
<a href="https://3water.com"><img src="images/2.jpg" alt="漂亮的风景图片二" /></a> 
<a href="http://www.codeplex.com"><img src="images/3.jpg" alt="漂亮的风景图片三" /></a> 
<a href="http://www.codeproject.com"><img src="images/4.jpg" alt="漂亮的风景图片四" /></a> 
<a href="http://sc.3water.com"><img src="images/5.jpg" alt="漂亮的风景图片五" /></a> 
<a href="http://s.3water.com"><img src="images/3.jpg" alt="漂亮的风景图片六" /></a> 
</div> 
<script> 
$("#scroll").ImageScroll(); 
</script>

- 运行结果

- 带参数调用

<script> 
$("#scroll").ImageScroll({delay:500, maskBgColor:"#ff0000"}); 
</script>

- 运行结果

小结

只是个小插件，可定制性可能不是很好，大家随便看看和修改好了，貌似IE8好像还有个小bug，一会修正了再上传，大家有什么bug发现，请回复告诉我，方便我及时修正，有代码上的优化意见，也请告诉我，帮助我这个新人学习，=.=