先展示一下效果:(因为截图工具的原因,小绿点不能正常展示)
插件的拓展方式
(function ($) {
//添加自定义jq插件
$.fn.extend({
pluginName: function (options) {
//dosometing;
}
})
})(jQuery);
插件的调用方式:
$(dom选择器).pluginName(options参数);
下面是我轮播图的插件代码,注意需要引入jqeury
/**
* 轮播图jquery插件说明
*
* 要求将被渲染为轮播图的div的id名为slider
* 调用方式为$('#slider').sliderImg(imgs);
* 其中imgs是图片数组,每一个数组元素为图片的路径名
* 样式需引入slider.css, 默认图片大小为520*280px, 若图片大小不同请自行修改
*/
(function ($) {
function Slider(options) {
this.wrapper = options.wrapper;
this.timer = null;
this.nowIndex = 0;
this.itemWidth = parseInt(this.wrapper.css('width'));
this.itemNum = imgs.length;
this.locked = false;
this.imgs = options;
this.init();
}
Slider.prototype.init = function () {
this.createDom();
this.bindEvent();
this.automove();
},
Slider.prototype.createDom = function () {
var imgBox = $('<ul class="img-box"></ul>');
var imgLi = '';
var orderListStr = ''
for (var i = 0; i < this.itemNum; i++) {
imgLi += '<li><a href="javascript:void(0)">\
<img src="'+ this.imgs[i] + '" alt="">\
</a></li>';
orderListStr += '<li></li>'
}
imgLi += '<li><a href="javascript:void(0)">\
<img src="'+ this.imgs[0] + '" alt="">\
</a></li>';
var btnDiv = '<div class="btn">\
<a class="prev"><span></span></a>\
<a class="next"><span></span></a>\
</div>';
var orderBox = $('<div class="order"></div>');
var orderUl = $('<ul></ul>');
$(this.wrapper).append(imgBox.html(imgLi))
.append($(btnDiv))
.append(orderBox.append(orderUl.html(orderListStr)));
$('#slider .order li').eq(0).addClass('active');
};
/**
* 绑定事件
*/
Slider.prototype.bindEvent = function() {
var self = this;
$('#slider .order li').add('.next').add('.prev').on('click', function () {
var className = $(this).attr('class')
if (className == 'prev') {
self.move('prev');
} else if (className == 'next') {
self.move('next');
} else {
self.move($(this).index())
}
})
$('#slider')
.on('mouseenter', function () {
$('#slider .btn').show();
clearTimeout(self.timer);
})
.on('mouseleave', function () {
$('#slider .btn').hide();
self.automove();
})
}
/**
* 定时调用移动函数,轮播下一张图片
*/
Slider.prototype.automove = function() {
clearInterval(this.timer)
var self = this;
this.timer = setTimeout(function () {
self.move('next');
}, 2000);
}
/**
* 根据方向,更改index,更改后的Index表示我想到哪一张去
* @param {*} dir 方向
*/
Slider.prototype.move = function(dir) {
if (this.locked) {
return;
}
this.locked = true;
if (dir == 'prev' || dir == 'next') {
if (dir == 'next') {
if (this.nowIndex == this.itemNum) {
this.nowIndex = 0;
$('#slider .img-box').css('left', 0);
}
this.nowIndex++;
} else {
if (this.nowIndex == 0) {
this.nowIndex = this.itemNum;
$('#slider .img-box').css('left', -(this.itemNum * this.itemWidth) + 'px');
}
this.nowIndex--;
}
} else {
this.nowIndex = dir;
}
//先改变索引样式,再滑动
this.changeStyle();
this.slider();
}
/**
* 移动到nowindex指向元素的位置
*/
Slider.prototype.slider = function() {
var self = this;
//这个animate必须写成对象形式
$('#slider .img-box').animate({ left: -(self.nowIndex * self.itemWidth) + 'px' }, function () {
self.automove();
self.locked = false;
})
}
/**
* 修改索引的样式
*/
Slider.prototype.changeStyle = function() {
$('#slider .order .active').removeClass('active');
if (this.nowIndex == this.itemNum) { //处理多出来一个轮播页的关键!!!
//这个时候是展示的多出来的那一张,其实是第0张
$('#slider .order li').eq(0).addClass('active');
} else {
$('#slider .order li').eq(this.nowIndex).addClass('active');
}
}
//添加自定义jq插件
$.fn.extend({
sliderImg: function (options) {
options.wrapper = this || $('body');
new Slider(options);
}
})
})(jQuery);
轮播图插件的调用即我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery轮播图插件</title>
<link rel="stylesheet" href="./css/slider.css">
</head>
<body>
<div id="slider"></div>
<script src="./js/jquery.js"></script>
<script src="./js/jquery.slider.js"></script>
<script>
var imgs = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg'];
$('#slider').sliderImg(imgs);
</script>
</body>
</html>
所用到的样式: slider.css和轮播图片在github上,地址 》点我《