Home > Article > Web Front-end > jQuery A plug-in for image switching_jquery

jQuery A plug-in for image switching_jquery

WBOYOriginal: 2016-05-16 18:01:071015browse

以下是参数说明：

参数名称	描述
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 = $("").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 = $("

").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(_this);
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 < _numCount; 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");
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);

- 调用代码

复制代码代码如下:

- Running results

- Call with parameters

Copy code The code is as follows:

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

- Running results

Summary
It’s just a small plug-in, and the customizability may not be very good. You can take a look and modify it. It seems that IE8 still has a small bug, which will be corrected in a while. Upload again. If you find any bugs, please reply and tell me so that I can make corrections in time. If you have any suggestions for optimizing the code, please tell me to help me as a newbie learn, =.=

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery EasyUI API Chinese documentation - ComboGrid combination table_jqueryNext article：jQuery EasyUI API Chinese documentation - ComboGrid combination table_jquery

See more

jQuery A plug-in for image switching_jquery

Related articles