原生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 相关文章推荐
js实现图片轮换效果代码
Apr 16 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JS数组的常用10种方法详解
May 08 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/12/18 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP面向对象精要总结
2014/11/07 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
event.srcElement+表格应用
2006/08/29 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
移动节点的jquery代码
2014/01/13 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
js实现继承的5种方式
2015/12/01 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
python3.0 字典key排序
2008/12/24 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python for循环生成列表的实例
2018/06/15 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
借款协议书
2014/04/12 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis