jQuery 画像切り替え用プラグイン_jquery

以下是参数说明：

参数名称	描述
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);


- 调用代仔




复制代仔

代仔以下:

<script> <BR>$("#scroll").ImageScroll(); <BR></script>


- 実行結果

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

コードをコピー コードは次のとおりです:

<script> <div class="codebody" id="code38452">$("#scroll").ImageScroll({delay:500, MaskBgColor:"#ff0000"}); <BR><BR> <BR>- 実行結果<BR><BR> 概要<BR> 小さなプラグインなので、カスタマイズ性はあまり良くないかもしれませんが、IE8 にはまだあるようです。小さなバグです。しばらくしてから修正します。バグを見つけたら、すぐに修正できるように返信してください。コードを最適化するための提案があれば、教えてください。初心者の私が学ぶ =.= <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/upload/201110/20111009231013266.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></script>