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


Posted in Javascript onMarch 09, 2020

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

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

效果

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

html结构

<div class="sliders-wraper" id="rotation-1">
 <ul class="sliders clear">
 <li class="slider" style="background:purple">5</li>
 <li class="slider" style="background:pink">1</li>
 <li class="slider" style="background:beige">2</li>
 <li class="slider" style="background:gold">3</li>
 <li class="slider" style="background:skyblue">4</li>
 <li class="slider" style="background:purple">5</li>
 <li class="slider" style="background:pink">1</li>
 </ul>
 <div class="pagenation">
 <div class="page page-active"><a></a></div>
 <div class="page"><a></a></div>
 <div class="page"><a></a></div>
 <div class="page"><a></a></div>
 <div class="page"><a></a></div>
 </div>
 <span class='prev rotation-btn'><</span>
 <span class='next rotation-btn'>></span>
</div>

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<this.length; i++)
 this.slideList[i].style.width = this.width + 'px'

 this.sliders.style.width = this.width * this.length + 'px'
 this.sliders.style.marginLeft = -this.width + "px";
 this.handler()
 this.auto && this.autoPlay()
 }

 D.getStyle = function(obj, attr){
 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr]; 
 }
 /*
 * @method bind
 * 事件绑定函数
 * bind events 
 */
 D.handler = function(){
 var _th = this,i=0
 if(this.btn){
 this.prev.onclick = function(){
 _th.turnLeft();
 }
 this.next.onclick = function(){
 _th.turnRight();
 }
 }
 if(this.focusBtn){
 for(; i<this.pageList.length; i++){
 this.pageList[i].key = i
 this.pageList[i].function(){
  _th.index = this.key + 1
  _th.toggleClass()
 }
 }
 }
 this.wraper.onmouseover = function(){
 clearInterval(_th.animation);
 }
 this.wraper.onmouseout = function(){
 _th.auto && _th.autoPlay()
 }
 }
 /*
 * func turnRight
 * 向右轮播函数
 * @para 0
 */
 D.turnRight = function(){
 this.index++;
 if(this.index == this.length-1){
 this.index=1;
 this.sliders.style.marginLeft = 0;
 }
 this.toggleClass(); 
 }
 /*
 * func turnLeft
 * 向左轮播函数
 * @para 0
 */
 D.turnLeft = function(){
 this.index--;
 if(this.index == 0){
 this.index = this.length-2;
 this.sliders.style.marginLeft = -this.width * (this.length-1) + "px";
 }
 this.toggleClass();
 }
 /*
 * func toggleClass
 * 改变数字焦点样式,轮播动画核心函数调用
 * @para 0
 */
 D.toggleClass = function(){
 if(this.focusBtn){
 this.pageList[this.activePage].className = "page";
 this.pageList[this.index-1].className = "page page-active";
 this.activePage = this.index-1;
 }
 this.slide(-this.index * this.width);
 }
 /*
 * func slide
 * 图片滚动函数,核心函数
 * @param ins 滚动终点
 */
 D.slide = function(ins){
 var _th = this
 // 防止动画过度过程中计算错误
 if(_th.timer) clearInterval(_th.timer);

 _th.timer = setInterval(move,_th.duration);

 function move(){

 var currentPosition = parseFloat(_th.sliders.style.marginLeft);
 // 根据起始点和目标位置的比较确定向哪个方向移动
 var n = ins-currentPosition<0?-1:1;

 if(Math.abs(ins-currentPosition) < _th.step){
 _th.sliders.style.marginLeft = ins + "px";
 clearInterval(_th.timer);
 }else{
 // 变速运动关键,注释变为匀速运动
 if(_th.mode == 'easy-in-out')
  _th.step = Math.abs(ins-currentPosition)/5
 _th.sliders.style.marginLeft = currentPosition + n*_th.step + "px";
 }
 
 }
 }
 /*
 * func autoPlay
 * 自动轮播函数
 * @para 0
 */
 D.autoPlay = function(){
 var _th = this
 clearInterval(_th.animation)
 _th.animation = setInterval(function(){
 _th.turnRight();
 },_th.delay)
 }
 /*
 * func debounce
 * 节流函数
 * @para fn<要执行的函数> 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图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 #Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 #Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 #Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 #Javascript
JavaScript中的this基本问题实例小结
Mar 09 #Javascript
Nuxt页面级缓存的实现
Mar 09 #Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
You might like
php分页函数
2006/07/08 PHP
php 操作符与控制结构
2012/03/07 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
深入理解JS异步编程-Promise
2019/06/03 Javascript
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
心理健康教育制度
2014/01/27 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL