基于jQuery的可复用轮播图
一、可修改参数
| 参数 | 说明 |
|---|---|
| width | 轮播图宽度 如：690px |
| height | 轮播图高度 如：345px |
| ear | 是否添加左右点击切换 默认false |
| dot | 是否添加底部小圆点切换 默认false |
| pointBulletColor | 初始小圆点颜色 格式必须为#fff 或者 #ffffff 默认为#ffffff |
| pointActiveColor | 选中状态的小圆点颜色 格式必须为#fff 或者 #ffffff 默认为 #007aff |
| autoplay | 是否自动播放 默认false |
| onbox | 鼠标放置轮播图上是否移除定时器 默认true |
| loop | 是否无缝轮播 默认false |
| delay | 延迟时间 默认2000 |
| speed | 每一屏的显示时间 默认500 |
二、内置参数
| 参数 | 说明 |
|---|---|
| prev | 上一页左侧耳朵类名 .un-prev |
| next | 下一页右侧耳朵类名 .un-next |
| swiper | 内层盒子的类名 .un-swiper |
| slider | 图片盒子类名 .un-slider |
| points | 小圆点盒子类名 .un-points |
| index | 索引 |
| timer | 定时器 |
| css | 切换动画 |
| len | 无缝轮播时原始图片张数 |
| li | 初始化时获取的图片类数组 |
| styledot | 小圆点添加样式的id |
| pointActiveClass | 选中小圆点的类名 |
三、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义轮播插件</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="less/style.css"/>
<style type="text/css">
.un-slider p{
position: absolute;
font-size: 40px;
}
</style>
</head>
<body>
<div class="un-container">
<div class="un-swiper">
<div class="un-slider item1">
<img src="images/1.png" >
<p>1</p>
</div>
<div class="un-slider item2">
<img src="images/2.png" >
<p>2</p>
</div>
<div class="un-slider item3">
<img src="images/3.png" >
<p>3</p>
</div>
<div class="un-slider item4">
<img src="images/4.png" >
<p>4</p>
</div>
</div>
</div>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//轮播图调用方式
var params = {
width:'690px',
height:'345px',
ear:true,
loop:true,
dot:true,
delay:3000,
pointBulletColor:'#ffffff',
pointActiveColor:'#666666'
}
$('.un-container').swiper(params)
</script>
</body>
</html>
四、css样式
body {
margin: 0;
padding: 0;
}
.un-container {
position: relative;
width: 690px;
height: 345px;
margin: 48px auto;
overflow: hidden;
z-index: 1;
}
.un-swiper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
-webkit-transition-property: -webkit-transform;
-webkit-box-sizing: content-box;
}
.un-slider {
position: relative;
width: 100%;
height: 100%;
text-align: center;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
flex-shrink: 0;
overflow: hidden;
}
.un-ear {
position: absolute;
display: block;
width: 48px;
height: 50px;
top: 50%;
margin-top: -25px;
z-index: 30;
}
.un-ear.un-prev {
left: 0;
background: url(../images/icon-arrow-left.png) no-repeat center 100%;
}
.un-ear.un-next {
right: 0;
background: url(../images/icon-arrow-right.png) no-repeat center 100%;
}
.un-ear.un-prev:hover {
background: url(../images/icon-arrow-left-active.png) no-repeat center 100%;
}
.un-ear.un-next:hover {
background: url(../images/icon-arrow-right-active.png) no-repeat center 100%;
}
.un-points {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
z-index: 30;
}
.un-points .un-point-bullet {
display: inline-block;
cursor: pointer;
padding: 6px;
border-radius: 50%;
background-color: #FFFFFF;
margin: 0 5px;
}
.un-points .un-point-bullet.un-point-active {
background-color: #007aff;
}
五、js代码
var Slider = function(container,params){
this.$ele = $(container);
this.config = {
prev:'.un-prev',
next:'.un-next',
swiper:'.un-swiper',
slider:'.un-slider',
points:'.un-points',
index:0,
timer:null,
css:{},
len:0,
li:[],
flag:true,
styledot:'dots',
pointActiveClass:'un-point-active',
}
this.defaults = {
width:'690px',//banner图的宽
height:'345px',//banner图的高
ear:false,//是否添加左右点击切换
dot:false,//是否添加底部小圆点切换
autoplay:false,//是否自动播放
onbox:true,
loop:false,//是否无缝切换
delay:2000,//延迟时间
speed:500,//每一屏的显示时间
current:0,
duration:0,
vertical:false,//滑动方向是否为纵向
mousewheelControl:false,
sliderActiveClass:'un-slider-active',
sliderNextClass:'un-slider-next',
pointBulletColor:'#ffffff',
pointActiveColor:'#007aff'
}
this.setting = $.extend({},this.defaults,params);
}
Slider.prototype = {
Initialize:function(){
var that = this;
that.getlenth();
/*自动播放*/
if(that.setting.autoplay){
that.play();
}
/*添加耳朵 并给两个耳朵绑定事件*/
if(that.setting.ear){
that.appendear();
$(that.config.next).click(function(ev){
that.right();
});
$(that.config.prev).click(function(ev){
that.left();
});
}
/*添加底部小圆点*/
if(that.setting.dot){
that.appendPonits();
$(that.config.points).on('click','span',function(){
var _index = $(this).index();
that.config.index = _index;
that.right();
});
}
/*鼠标放置在盒子上移除定时器 移开后又添加定时器*/
if(that.setting.onbox && that.setting.autoplay){
$(that.$ele[0]).mouseover(function(){
that.clear();
});
$(that.$ele[0]).mouseout(function(){
that.play();
});
}
/*滚轮切换*/
if(that.setting.mousewheelControl){
$(that.$ele[0]).on('mousewheel',function(ev){
that.wheel(ev)
})
}
},
left:function(){
var that = this;
var $s = $(that.config.swiper);
if(that.setting.loop){
that.config.index--;
if(that.config.index === 0){
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width)*that.config.index)+'px, 0px, 0px)';
$s.css(that.config.css);
setTimeout(()=>{
that.config.index = that.config.len;
$s[0].style.transitionDuration = null;
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width)*that.config.index)+'px, 0px, 0px)';
$s.css(that.config.css);
},that.setting.speed);
}
if(that.config.index > 0){
$s.css('transitionDuration',that.setting.speed/1000+'s');
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width)*that.config.index)+'px, 0px, 0px)';
$s.css(that.config.css);
}
that.changeDot(that.config.index - 1);
}
if(that.config.index > 0 && !that.setting.loop){
that.config.index--;
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width)*that.config.index)+'px, 0px, 0px)';
$(that.config.swiper).css(that.config.css);
that.changeDot(that.config.index);
}
},
right:function(){
var that = this;
if(that.setting.loop){
var $s = $(that.config.swiper);
that.config.index++;
if(that.config.index === that.config.len){
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width)*that.config.index)+'px, 0px, 0px)';
$s.css(that.config.css);
setTimeout(()=>{
that.config.index = 0;
$s[0].style.transitionDuration = null;
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width)*that.config.index)+'px, 0px, 0px)';
$s.css(that.config.css);
},that.setting.speed);
}
if(that.config.index < that.config.len){
$s.css('transitionDuration',that.setting.speed/1000+'s');
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width)*that.config.index)+'px, 0px, 0px)';
$s.css(that.config.css);
}
that.changeDot(that.config.index - 1);
}
if(that.config.index < that.config.len-1 && !that.setting.loop){
that.config.index = that.config.index + 1;
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width)*that.config.index)+'px, 0px, 0px)';
$(that.config.swiper).css(that.config.css);
that.changeDot(that.config.index);
}
},
wheel:function(event){
var that = this;
var delta = 0;
if(!event) event = window.event;console.log(event.originalEvent['wheelDelta'])
if(event.originalEvent.wheelData){//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
delta = event.wheelData/120;
console.log(delta)
if(window.opera)
//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
delta = -delta;
}else if(event.originalEvent.detail){
delta = -event.detail/3;
console.log(delta)
}
if(delta){
event.preventDefault() && event.stopPropagation();
}
},
play:function(){
var that = this;
that.config.timer = setInterval(()=>{that.right()},that.setting.delay);
},
clear:function(){
var that = this;
clearInterval(that.config.timer);
},
getlenth:function(){
var that = this;
var s = $(that.config.swiper+' '+that.config.slider);
that.config.li = Array.prototype.slice.call(s);
that.config.len = that.config.li.length;
that.$ele[0].style.width = that.setting.width;
that.$ele[0].style.height = that.setting.height;
if(!that.setting.loop){
$(that.config.swiper).css('transitionDuration',that.setting.speed/1000+'s');
/*滑动方向是否为纵向*/
if(that.setting.vertical){
that.config.css['transform'] = 'translate3d(0px, 0px, 0px)';
$(that.config.swiper).css(that.config.css);
}
}else{
that.config.index = 1;
var $li = $(that.config.swiper+' '+that.config.slider)[0];
var $end = $(that.config.swiper+' '+that.config.slider)[that.config.len-1];
$(that.config.swiper).append($($li).clone());
$($li).before($($end).clone());
$(that.config.swiper).css('transitionDuration',that.setting.speed/1000+'s');
that.config.css['transform'] = 'translate3d(-'+(parseInt(that.setting.width))+'px, 0px, 0px)';
$(that.config.swiper).css(that.config.css);
}
},
appendear:function(){
var that = this;
var ear = `<a class="un-ear un-prev" href="javascript:;"></a>
<a class="un-ear un-next" href="javascript:;"></a>`;
that.$ele.append(ear);
},
appendPonits:function(){
var that = this;
var points = `<div class="un-points">
<span class="un-point-bullet un-point-active"></span>
<span class="un-point-bullet"></span>
<span class="un-point-bullet"></span>
<span class="un-point-bullet"></span>
</div>`;
that.$ele.append(points);
if(that.setting.pointBulletColor || that.setting.pointActiveColor){
var stylee=document.createElement('style');
stylee.type = 'text/css';
stylee.id = that.config.styledot;
var sHtml = '';
if(that.setting.pointBulletColor.indexOf('#')>-1 && that.setting.pointBulletColor.length > 4){
sHtml +=".un-points .un-point-bullet{background-color:"+that.setting.pointBulletColor+";}";
}
if(that.setting.pointActiveColor.indexOf('#')>-1 && that.setting.pointActiveColor.length > 4){
sHtml += ".un-points .un-point-bullet.un-point-active{background-color:"+that.setting.pointActiveColor+"}";
}
if(sHtml){
stylee.innerHTML = sHtml;
document.getElementsByTagName('head').item(0).appendChild(stylee);
}
}
},
changeDot:function(index){
var that = this;
if(that.setting.dot){
var d = $(that.config.points).children();
d.eq(index).addClass(that.config.pointActiveClass).siblings().removeClass(that.config.pointActiveClass);
}
}
}
$.fn.swiper = function(params){
var slider = new Slider(this,params);
return slider.Initialize();
}
六、实例
