重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家分享的是有关原生js无缝轮播插件怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
建网站原本是网站策划师、网络程序员、网页设计师等,应用各种网络程序开发技术和网页设计技术配合操作的协同工作。创新互联建站专业提供成都网站设计、做网站,网页设计,网站制作(企业站、响应式网站设计、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!
效果
html结构
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; idelay<节流时间> * @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() }
感谢各位的阅读!关于“原生js无缝轮播插件怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!