原生js无缝轮播插件使用详解

这篇博文主要讲如何使用原生js来实现一个兼容 IE9+ 的无缝轮播图。主要知识点如下：

• 面向对象
• js优化之节流函数
• js运动
  

效果

html结构

 

 
5
 
1
 
2
 
3
 
4
 
5
 
1
 
 

 

 

 

 

 

 
 <
 >

css样式

*{margin: 0;padding: 0;box-sizing: border-box;}
.clear{zoom: 0;}
.clear:after{content: '';display: block;overflow: hidden;clear: both;widows: 0;height: 0;}
.sliders-wraper{width: 100%;height: 400px;line-height: 400px;
 overflow: hidden;position: relative;text-align: center;}
.sliders{position: absolute;list-style: none;font-size: 50px;}
.slider{float: left;}
.rotation-btn{position: absolute;top: 50%;width: 50px;height: 50px;
 line-height: 50px;margin-top: -25px;font-size: 30px;color: #ccc;cursor: pointer;}
.prev{left:0;}
.next{right:0;}
.pagenation{position: absolute;bottom: 10px;width: 100%;height: 25px;line-height: 25px;}
.pagenation .page{width: 40px;height: 25px;display: inline-block;cursor: pointer;}
.pagenation .page a{display: block;width: 30px;height: 5px;border: 1px solid #ccc;
 border-radius: 5px;background: transparent;margin: 10px auto;}
.pagenation .page-active a{border-color: #0076ff;background-color: #0076ff;}

js

;(function(doc, win){
 function Rotation(obj){
 this.wraper = doc.getElementById(obj.el) //窗口
 this.sliders = this.wraper.getElementsByClassName('sliders')[0] //图片父盒子
 this.slideList = this.sliders.getElementsByClassName('slider') //所有图片
 this.length = this.slideList.length
 this.index = 1 //当前显示的图片的索引
 this.timer = null //单张图片运动定时器
 this.animation = null //自动轮播定时器

 // 在obj中可以自定义的参数
 this.mode = 'easy-in-out'//动画曲线，可选 'linear'
 this.step = 5 //匀速运动滚动步长
 this.delay = 2500 //轮播间隔
 this.duration = 40 //单张图片动画时长
 this.auto = true //是否开启自动轮播
 this.btn = false //是否有左右按钮
 this.focusBtn = true //是否支持焦点事件

 for(var k in obj)
 this[k] = obj[k]
 if(this.btn){
 this.prev = this.wraper.getElementsByClassName('prev')[0]
 this.next = this.wraper.getElementsByClassName('next')[0]
 }
 if(this.focusBtn){
 this.pagenation = this.wraper.getElementsByClassName('pagenation')[0]
 this.pageList = this.pagenation.getElementsByClassName('page')
 this.activePage = 0 //当前的焦点的索引
 }
 this.init()
 }

 var D = Rotation.prototype
 /*
 * func init
 * 初始化函数
 * @para 0 
 */
 D.init = function(){
 this.width = this.wraper.clientWidth
 if(this.mode == 'linear')
 this.duration = 1
 for(var i=0; i delay<节流时间>
 * @value func
 */
 D.debounce = function(fn,delay){
 var timer = null
 return function(){
 if(timer){
 clearTimeout(timer)
 }
 timer = setTimeout(fn,delay)
 }
 }
 /*
 * func refresh
 * 自动刷新函数，这里采用节流是防止刷新操作太过于频繁导致性能下降
 * @para 0
 */
 D.refresh = function(){
 var _th = this
 this.debounce(function(){
 _th.init()
 _th.toggleClass()
 },100)()
 }
 /*
 * func rotation
 * 实例化函数
 * @para obj 实例化的具体参数
 * @value 返回具体实例
 */
 win.rotation = function(obj){
 return new Rotation(obj)
 }
})(document, window)

调用方式

var r2 = rotation({
 el: 'rotation-1',
 mode: 'easy-in-out', //运动曲线
 auto: true,//开启自动轮播
 btn: true, //左右按钮
 focusBtn: false//焦点
})
window.onresize = function(){
 r2 && r2.refresh()
}

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。