以下是参数说明： 参数名称 描述 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="http://www.jb51.net"><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.jb51.net"><img src="images/5.jpg" alt="漂亮的风景图片五" /></a> <a href="http://s.jb51.net"><img src="images/3.jpg" alt="漂亮的风景图片六" /></a> </div> <script> $("#scroll").ImageScroll(); </script> - 运行结果 - 带参数调用 复制代码 代码如下: <script> $("#scroll").ImageScroll({delay:500, maskBgColor:"#ff0000"}); </script> - 运行结果 小结 　　只是个小插件，可定制性可能不是很好，大家随便看看和修改好了，貌似IE8好像还有个小bug，一会修正了再上传，大家有什么bug发现，请回复告诉我，方便我及时修正，有代码上的优化意见，也请告诉我，帮助我这个新人学习，=.=

　　推荐阅读

　　通过JavaScript控制字体大小的代码

为了此代码到您的网页必须使用像素大小的字体（PX），而不是相对大小的字体，使用“EM”或“％”。当然如果你使用其他字体单位的代码可以很容易地适应这些。如果脚本不能找到一个段落的字体大小，它会默认为12px。>>>详细阅读

本文标题：jQuery 一个图片切换的插件

地址：http://www.17bianji.com/kaifa2/JS/24085.html

 1/2    1