jQuery 一个图片切换的插件
jQuery 一个图片切换的插件
发布时间:2016-12-30 来源:查字典编辑
摘要:以下是参数说明:参数名称描述delay图片切换速度,单位毫秒maskOpacity遮罩层透明度,1为不透明,0为全透明numOpacity数...

以下是参数说明:

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

<>

</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>

- 运行结果

jQuery 一个图片切换的插件1

- 带参数调用

复制代码 代码如下:

<script>

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

</script>

- 运行结果

jQuery 一个图片切换的插件2

小结

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类