下面是我周末写得一个jQuery的轮播插件，这是一个经常会用到的功能，首次开发插件，有什么不足之处，请大家指正。
此插件可以传递参数，只是没有提供修改默认参数值的方法，后期会继续改进。
打算再继续开发jQuery手风琴和放大镜效果的插件。
### jquery轮播图插件
~~~
/**
*
* @authors Yvette Lau
* @date 2015-11-1 16:26:27
* @version $1.0$
*
**/
(function($){
$.carousel = {
carousel: function(_obj, _srcArray, _options){
/*默认样式*/
var defaults = {
"div": {
"width": "1000px",
"height": "400px",
"position": "relative",
"cursor": "pointer"
},
"img": {
"width": _obj.css("width"),
"height": _obj.css("height"),
"display":"none"
},
"ul": {
"list-style" : "none",
"position": "absolute",
"bottom": "20px",
"margin": "0px",
"padding": "0px 0px"
},
"li":{
"float": "left",
"width": "10px",
"height": "10px",
"border": "2px solid #FFFFFF",
"border-radius": "10px",
"padding": "0px 0px",
"margin-left": "10px"
},
"indexClick":{
"backgroundColor": "#FFFFFF"
},
"a":{
"width": "60px",
"text-align": "center",
"font-size": "30px",
"font-weight": "normal",
"font-family": "Microsoft Yahei",
"text-decoration": "none",
"color": "#000000",
"height": parseInt(_obj.css("height"))/5 + "px",
"position": "absolute",
"top": 2 * parseInt(_obj.css("height"))/5 + "px",
"line-height": parseInt(_obj.css("height"))/5 + "px",
"display": "none",
"cursor": "pointer",
"user-select": "none",
"opacity": 0.7
},
"nextPicture": {
"background": "#FFFFFF",
"background-repear": "no-repeat",
"background-size": "cover",
"right": "20px"
},
"prePicture": {
"background": "#FFFFFF",
"background-repear": "no-repeat",
"background-size": "cover",
"left": "20px"
},
"interval":{
"period" : 2000
}
};
/*如果传递参数*/
if(_options){
for(var i in defaults){
$.extend(defaults[i], _options[i]);
}
}
$.carousel.initCarousel(_obj, _srcArray, defaults); //初始化轮播div的样式
$.carousel.insertImage(_obj,_srcArray, defaults); //插入图片，并设置样式
$.carousel.insertIndex(_obj,_srcArray, defaults); //插入index,并设置样式
$.carousel.insertButtons(_obj,_srcArray, defaults); //插入上一张、下一张按钮，并设置样式
$.carousel.loopImages(_obj, _srcArray, defaults); //设置定时器循环播放
},
/**********************************************************
* 初始化div的样式
*
***********************************************************/
initCarousel: function(_obj, _src, _defaults){
var _default = _defaults.div;//默认的div宽高及定位
_default.width = _obj.css("width") || _default.width;
_default.height = _obj.css("height") || _default.height;
/*设置div的定位*/
_default.position = _obj.css("position") == "static" ? _default.position : _obj.css("position");
$.carousel.setCss(_obj, _default);
/*鼠标移入div,和移出div*/
_obj.hover(function(){
$(this).find("a").css({"display": "block"});
clearInterval(window.carouselTimer);
},function(){
$(this).find("a").css({"display": "none"});
$.carousel.loopImages(_obj, _src, _defaults);
//setInterval(window.carouselTimer);
})
},
/**********************************************************
* 插入图片
*
***********************************************************/
insertImage: function(_obj, _imgsrc, _defaults){
for(var i = 0; i < _imgsrc.length; i++){
var $img = $("<img>");
$img.attr({"idnex":i});
$img.attr({"src":_imgsrc[i]}).appendTo(_obj);
}
$.carousel.initImgStyle(_obj,_defaults);//初始化图片样式
},
/**********************************************************
* 初始化图片样式
*
***********************************************************/
initImgStyle: function(_obj, _defaults){
var $images = _obj.find("img");
$.carousel.setCss($images, _defaults.img);
$.carousel.setCss($images.eq(0),{"display":"block"});/*显示第一张图片*/
},
/**********************************************************
* 插入ul li
*
***********************************************************/
insertIndex: function(_obj, _imgsrc, _defaults){
var $ul = $("<ul>");
$ul.attr("id","carouselIndex");/*给ul加上id = "index"的属性*/
$ul.appendTo(_obj);
for(var i = 0; i < _imgsrc.length; i++){
var $li = $("<li>");
$li.appendTo($("#carousel ul"));
}
$.carousel.initIndexStyle(_obj,_imgsrc, _defaults);
},
/**********************************************************
* 初始化index的样式
*
***********************************************************/
initIndexStyle: function (_obj, _imgsrc, _defaults){
/*ul定位*/
$.carousel.setCss($("#carouselIndex"), _defaults.ul);
/*li的样式*/
$.carousel.setCss($("#carouselIndex li"), _defaults.li);
/*设置圆圈水平方向居中*/
var _ulWidth = $("#carouselIndex").width();
var _carouselWidth = _obj.width();
var _left = (_carouselWidth - _ulWidth)/2;
$.carousel.setCss($("#carouselIndex"),{"margin-left":_left});
/*设置第一个的圆圈被选中*/
$.carousel.setCss($("#carouselIndex li").eq(0),{"background-color": _defaults.indexClick.backgroundColor});
/*绑定点击事件*/
$("#carouselIndex li").click(function(){
$.carousel.indexClick($(this).index(), _obj, _imgsrc, _defaults);
});
},
/**********************************************************
* 插入上一张、下一张按钮
*
***********************************************************/
insertButtons: function(_obj, _imgsrc, _defaults){
var _next = $("<a>");
var _pre = $("<a>");
var reg = /^url/;
/*按钮的背景不为图片时*/
if(!reg.test(_defaults.nextPicture.background)){
_next.text(">");
}
if(!reg.test(_defaults.prePicture.background)){
_pre.text("<");
}
_next.attr({"id":"nextPicture"});
_pre.attr({"id":"prePicture"});
_next.appendTo(_obj);
_pre.appendTo(_obj);
$.carousel.initButtonstyle(_obj, _next, _pre, _imgsrc, _defaults);
},
/**********************************************************
* 初始化上一张、下一张按钮样式
*
***********************************************************/
initButtonstyle: function (_obj, _next, _pre, _imgsrc, _defaults){
/*设置按钮竖直方向居中*/
var _carHeight= _obj.height();
$.carousel.setCss(_obj.find("a"), _defaults.a);
/*对上一张按钮和下一张按钮定位*/
$.carousel.setCss(_obj.find("#nextPicture"), _defaults.nextPicture);
$.carousel.setCss(_obj.find("#prePicture"), _defaults.prePicture);
/*绑定点击事件*/
_next.on("click",function(){$.carousel.nextPicture(_obj, _imgsrc, _defaults)});
_pre.on("click",function(){$.carousel.prePicture(_obj, _imgsrc, _defaults)});
},
/**********************************************************
* 设置元素样式
*
***********************************************************/
setCss: function(_objElements,options){
for (var i = 0; i < _objElements.length; i++)
{
for(var cs in options){
_objElements.eq(i).css(cs, options[cs]);
}
}
},
/**********************************************************
* 设置定时器播放
*
***********************************************************/
loopImages: function(_obj, _imgsrc, _defaults){
window.carouselTimer = setInterval(function(){
_obj.find("img").each(function(){
if($(this).css("display") == "block"){
return index = $(this).index();
}
});
++index;
_obj.find("img").eq(index).css({"display": "block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor}).siblings("li").css({"background":"none"});
if(index == _imgsrc.length){
index = 0;
_obj.find("img").eq(0).css({"display":"block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(0).css({"background-color": _defaults.indexClick.backgroundColor}).siblings("li").css({"background":"none"});
}
}, _defaults.interval.period);
},
/**********************************************************
* 当点击下一张按钮
*
***********************************************************/
nextPicture: function(_obj, _imgsrc, _defaults){
clearInterval(window.carouselTimer);
_obj.find("img").each(function(){
if($(this).css("display") == "block"){
return index = $(this).index();
}
});
index = (index == _imgsrc.length - 1) ? 0 : ++index;
_obj.find("img").eq(index).css({"display":"block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor})
.siblings("li").css({"background":"none"});
},
/**********************************************************
* 当点击上一张按钮
*
***********************************************************/
prePicture: function(_obj, _imgsrc, _defaults){
clearInterval(window.carouselTimer);
_obj.find("img").each(function(){
if($(this).css("display") == "block"){
return index = $(this).index();
}
});
index = (index == 0 ) ? _imgsrc.length - 1 : --index;
_obj.find("img").eq(index).css({"display":"block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(index).css({"background-color": _defaults.indexClick.backgroundColor})
.siblings("li").css({"background":"none"});
},
/**********************************************************
* 当底部的index被选中时
*
***********************************************************/
indexClick: function(_index, _obj, _imgsrc, _defaults){
_obj.find("img").eq(_index).css({"display":"block"}).siblings("img").css({"display":"none"});
_obj.find("#carouselIndex li").eq(_index).css({"background-color": _defaults.indexClick.backgroundColor})
.siblings("li").css({"background":"none"});
}
}
})(jQuery);
~~~
### 轮播图插件调用。
首先包含jquery.js的库，引入此上面的插件文件。
下面是我测试时，所编写的Html文档，此插件非常简单易用，只需要定义一个div即可。
~~~
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="">
<title>Document</title>
<style>
#carousel{
width:1200px;
height:350px;
}
</style>
<!--css js 文件的引入-->
</head>
<body>
<div id = "carousel">
</div>
</body>
</html>
<script type = "text/javascript" src = "jquery-1.11.2.min.js"></script>
<script type = "text/javascript" src = "js/carousel_2.js"></script>
<script type = "text/javascript">
$(function(){
var $carousel = $("#carousel");
var imgSrc = ["images/banner-1.jpg", "images/banner-2.jpg", "images/banner-3.jpg","images/banner-4.jpg","images/banner-5.jpg"];
//$.carousel.carousel($carousel, imgSrc);
//$.carousel.carousel($carousel, imgSrc, {"interval": {"period": 1000}});
$.carousel.carousel($carousel, imgSrc, {"a": {"display": "none"}});
// $.carousel.carousel($carousel, imgSrc,{"indexClick":{"backgroundColor": "#FF0000"},
// "li":{"border": "2px solid #09FF2E"},
// "prePicture":{"background":"url(images/alarm.png)"}});
// $.carousel.carousel($carousel, imgSrc,{"indexClick":{"backgroundColor": "#FF0000"},
// "li":{"border": "2px solid #09FF2E"},
// "prePicture":{"background":"url(images/alarm.png)"},
// "nextPicture":{"background":"url(images/alarm.png)"}});
});
</script>
~~~
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法（二）
- JS this词法（三）
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证（登录/注册）
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单（一）
- Bootstrap表单（二）
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异（checkbox）
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器（全）
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述（推荐）
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解