原生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 相关文章推荐
ajax请求get与post的区别总结
Nov 04 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
javascript实现简易的计算器
Jan 17 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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 判断数组是几维数组
2013/03/20 PHP
php mail to 配置详解
2014/01/16 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
JavaScript Prototype对象
2009/01/07 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
Bootstrap table使用方法记录
2017/08/23 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python3实现生成随机密码的方法
2014/08/23 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
浅谈五大Python Web框架
2017/03/20 Python
pyqt5自定义信号实例解析
2018/01/31 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Django中使用Celery的方法示例
2018/11/29 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Python如何生成xml文件
2020/06/04 Python
比驿:全球酒店比价网
2018/06/20 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
学校实习推荐信
2015/03/27 职场文书
入伍通知书
2015/04/23 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
canvas 中如何实现物体的框选
2022/08/05 Javascript