轮播图插件
在这里插入代码片(function ($) {
function Swiper(options) {
// 轮播图添加到的父级
this.wrap = options.wrap;
// 轮播图片列表
this.imgList = options.imgList;
// 轮播图片数量
this.imgNum = this.imgList.length;
// 轮播图片动画类型
this.animate = options.animate || 'fade';
// 是否自动轮播
this.isAuto = options.isAuto;
// 是否展示轮播小圆点
this.showBtn = options.showBtn === undefined ? true : options.showBtn;
// 每张图片宽度
this.imgWidth = options.imgWidth || this.wrap.width();
// 每张图片的高度
this.imgHeight = options.imgHeight || this.wrap.height();
// 当前展示图片的索引值
this.nowIndex = 0;
// 动画是否正在执行
this.flag = false;
// 自动轮播定时器
this.timer = null;
// 初始化函数
this.init = function () {
this.createDom();
this.initStyle();
this.bindEvent();
if (this.isAuto) {
this.autoChange();
}
}
}
// 创建dom元素
Swiper.prototype.createDom = function () {
// 创建轮播图图片区域
var oUl = $('<ul class="swiper-wrapper"></ul>');
// 创建轮播图小圆点区域
var spotDiv = $('<div class="spot"></div>');
// 添加图片和小圆点
this.imgList.forEach(function (item, index) {
$('<li><a href="#"><img src="' + item + '"/></a></li>').appendTo(oUl);
$('<span></span>').appendTo(spotDiv);
});
if (this.animate == 'animate') {
$('<li><a href="#"><img src="' + this.imgList[0] + '"/></a></li>').appendTo(oUl);
}
// 左右两个切换按钮
var leftBtn = $('<div class="left-btn btn"><</div>');
var rightBtn = $('<div class="right-btn btn">></div>');
// 添加到页面中
$(this.wrap).append(oUl).append(leftBtn).append(rightBtn);
if (this.showBtn) {
$(this.wrap).append(spotDiv);
}
// 初始化当前显示的图片
}
// 初始化样式
Swiper.prototype.initStyle = function() {
// 给轮播图区域添加初始化样式
$(this.wrap).css({
position: 'relative',
overflow: 'hidden',
});
$('*', this.wrap).css({
padding: 0,
margin: 0,
listStyle: 'none',
textDecoration: 'none',
}).find('img').css({
width: '100%',
height: '100%'
});
// 给图片区域添加样式 如果动画是淡入淡出则将图片放置在一起 并仅展示第一张
if (this.animate == 'fade') {
$('.swiper-wrapper', this.wrap).css({
width: this.imgWidth,
height: this.imgHeight
}).find('li').css({
position: 'absolute',
width: this.imgWidth,
height: this.imgHeight,
display: 'none',
}).eq(0).css({
display: 'block',
});
// 如果动画是轮播则将图片放置在一行
} else {
$('.swiper-wrapper', this.wrap).css({
width: this.imgWidth * (this.imgNum + 1),
height: this.imgHeight,
position: 'absolute',
left: 0,
top: 0,
overflow: 'hidden',
}).find('li').css({
// position: 'absolute',
float: 'left',
width: this.imgWidth,
height: this.imgHeight
});
}
// 左右按钮样式
$('.btn', this.wrap).css({
width: 50,
height: 50,
lineHeight: '50px',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
textAlign: 'center',
color: '#fff',
position: 'absolute',
top: '50%',
marginTop: -25,
cursor: 'pointer',
}).filter('.right-btn').css({
right: 0,
});
$('.spot', this.wrap).css({
position: 'absolute',
overflow: 'hidden',
bottom: 10,
width: '100%',
textAlign: 'center',
}).find('span').css({
// float: 'left',
display: 'inline-block',
width: 10,
height: 10,
margin: "0 5px",
borderRadius: '50%',
backgroundColor: '#fff',
cursor: 'pointer',
}).eq(this.nowIndex).css({
backgroundColor: 'red'
});
}
// 绑定事件
Swiper.prototype.bindEvent = function () {
var self = this;
// 上一张按钮点击事件
$('.left-btn', this.wrap).click(function () {
if (self.flag) {
return false;
}
// 当前图片索引值为0时点击上一张将要展示最后一张图片索引值为imgNum - 1
if (self.nowIndex == 0) {
self.nowIndex = self.imgNum - 1;
// 如果动画类型时animate的话 图片要瞬间移动到最后一张图片的位置上再进行动画效果
if (self.animate == 'animate') {
$('.swiper-wrapper', self.wrap).css({
left: -self.imgWidth * self.imgNum
});
}
} else {
self.nowIndex --;
}
// 执行动画效果
self.changeImage();
});
// 下一张按钮点击事件
$('.right-btn', this.wrap).click(function () {
if (self.flag) {
return false;
}
// 如果动画效果为淡入淡出 则判断当前图片的索引是否展示的是图片轮播的最后一张如果是 则上一页为第一页即索引值为0
if (self.animate == 'fade' && self.nowIndex == self.imgNum - 1) {
self.nowIndex = 0;
// 如果动画效果为animate 则要判断索引值是否是图片轮播最后一张图片的下一位即索引值为imgNum(重复的第一张图片位置) 如果是 则将轮播图位置瞬间移至第一张图片的位置 再进行轮播
} else if (self.animate == 'animate' && self.nowIndex == self.imgNum) {
$('.swiper-wrapper', self.wrap).css({
left: 0
});
self.nowIndex = 1;
} else {
self.nowIndex ++;
}
// 执行动画效果
self.changeImage();
});
$('.spot > span', this.wrap).click(function () {
if (self.flag) {
return false;
}
// console.log()
self.nowIndex = $(this).index();
self.changeImage()
});
$(this.wrap).mouseenter(function () {
clearInterval(self.timer);
}).mouseleave(function () {
self.autoChange();
});
}
Swiper.prototype.changeImage = function () {
this.flag = true;
var self = this;
if (this.animate == 'fade') {
// 淡入淡出效果调用fadeIn fadeOut方法
$('.swiper-wrapper > li', this.wrap).fadeOut()
.eq(this.nowIndex).fadeIn(function () {
self.flag = false;
});
// $('.spot > span', this.wrap).css('background-color', '#fff')
// .eq(this.nowIndex).css({
// backgroundColor: 'red',
// });
} else {
// 轮播动画效果改变left值
$('.swiper-wrapper', this.wrap).animate({
left: -this.nowIndex * this.imgWidth
}, function () {
self.flag = false;
})
}
$('.spot > span', this.wrap).css('background-color', '#fff')
.eq(this.nowIndex % this.imgNum).css({
backgroundColor: 'red',
});
}
Swiper.prototype.autoChange = function () {
var self = this;
this.timer = setInterval(function() {
$('.right-btn', self.wrap).trigger('click');
}, 3000)
}
$.fn.extend({
swiper: function(options) {
options.wrap = this;
var obj = new Swiper(options);
obj.init();
}
})
} (jQuery))```