jQuery 画像切り替え用プラグイン_jquery-jsチュートリアル-php.cn

以下是参数说明：

参数名称 描述 delay 图片切换速度，单位毫秒 maskOpacity 遮罩层透明度，1为不透明，0为全透明 numOpacity 数字按钮透明度，1为不透明，0为全透明 maskBgColor 遮罩层背景色 textColor 标题字体颜色 numColor 数字按钮字体颜色 numBgColor 数字按钮背景色 alterColor 数字按钮选中项字体颜色 alterBgColor 数字按钮选中项背景颜色 插件代码及调用 - 插件名：ImageScroll 复制代 代次: (function($){ $.fn.ImageScroll = function(options) { var defaults = { 遅延: 2000, マスクOpacity: 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 _index = 0; .each(function(index){ var temp = $(this).find("img:eq(0)"); _links.push($(this).attr("href")) ; _texts.push(temp.attr("alt")); _urls.push("src")); ;= 0) { return; } else { _this.html(""); var _width = _this.width(); _height = _this.height(); var _numCount = _list.length; var _numColumn = Math.ceil(_numCount / 2); .css({"表示":"ブロック", "位置":"絶対","上":"0px","左":"0px", "z-index":"2", "幅": _width "px", "height":_height "px", "background":"url(" _urls[0] ")"}).appendTo(_this); var _mask = $(" ").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 = $(" ").attr("style","opacity:" options.numOpacity) .css({"position":"absolute", "right") :"0px", "bottom":"0px", "z-index":"5", "width":_numColumn*22, "opacity":options.numOpacity, "height":"44px"}).appendTo （_これ）; var _text = $(" ").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 { $(" ").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"); 関数 alter() { if(_index > _numCount-1) { _index = 0; } _tempList.eq(_index).click(); } function numClick(obj) { var i = _tempList.index(obj); _tempList.css({"背景色":options.numBgColor, "color":options.numColor}); obj.css({"背景色":options.alterBgColor, "color":options.alterColor}); _img.attr({"href":_links[i], "target":"_blank"}) .css({"opacity":"0", "background":"url(" _urls) [i] ")"}) .animate({"不透明度":"1"}, 500); _text.html(_texts[i]); _index = i 1; } setTimeout(alter, 10); _timer = setInterval(alter, options.lay); _this.css("表示", "ブロック"); }; })(jQuery);

- 调用代仔

复制代仔 代仔以下: body { フォントファミリー: Verdana、Arial、Helvetica、サンセリフ; フォントサイズ: 12px; #scroll { 位置:相対; 高さ:300px; -> $("#scroll").ImageScroll();

- 実行結果

- パラメータを指定して呼び出します

コードをコピー コードは次のとおりです: $("#scroll").ImageScroll({delay:500, MaskBgColor:"#ff0000"});

- 実行結果 概要 小さなプラグインなので、カスタマイズ性はあまり良くないかもしれませんが、IE8 にはまだあるようです。小さなバグです。しばらくしてから修正します。バグを見つけたら、すぐに修正できるように返信してください。コードを最適化するための提案があれば、教えてください。初心者の私が学ぶ =.=