jQuery 一个图片切换的插件


Posted in Javascript onOctober 09, 2011

以下是参数说明:

 参数名称  描述
 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="https://3water.com"><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.3water.com"><img src="images/5.jpg" alt="漂亮的风景图片五" /></a> 
<a href="http://s.3water.com"><img src="images/3.jpg" alt="漂亮的风景图片六" /></a> 
</div> 
<script> 
$("#scroll").ImageScroll(); 
</script>

- 运行结果

jQuery 一个图片切换的插件
- 带参数调用

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

- 运行结果
jQuery 一个图片切换的插件
小结

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

Javascript 相关文章推荐
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 #Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 #Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 #Javascript
javascript之bind使用介绍
Oct 09 #Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 #Javascript
使用jQuery操作Cookies的实现代码
Oct 09 #Javascript
jQuery实现切换页面布局使用介绍
Oct 09 #Javascript
You might like
php查询相似度最高的字符串的方法
2015/03/12 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python线性方程组求解运算示例
2018/01/17 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
毕业自我鉴定范文
2013/11/06 职场文书
土地转让协议书
2014/04/15 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
工地食品安全责任书
2015/05/09 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
springboot+VUE实现登录注册
2021/05/27 Vue.js
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android