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.pagea{display:block;width:30px;height:5px;border:1pxsolid#ccc;
border-radius:5px;background:transparent;margin:10pxauto;}
.pagenation.page-activea{border-color:#0076ff;background-color:#0076ff;}
js
;(function(doc,win){
functionRotation(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(varkinobj)
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()
}
varD=Rotation.prototype
/*
*funcinit
*初始化函数
*@para0
*/
D.init=function(){
this.width=this.wraper.clientWidth
if(this.mode=='linear')
this.duration=1
for(vari=0;idelay<节流时间>
*@valuefunc
*/
D.debounce=function(fn,delay){
vartimer=null
returnfunction(){
if(timer){
clearTimeout(timer)
}
timer=setTimeout(fn,delay)
}
}
/*
*funcrefresh
*自动刷新函数，这里采用节流是防止刷新操作太过于频繁导致性能下降
*@para0
*/
D.refresh=function(){
var_th=this
this.debounce(function(){
_th.init()
_th.toggleClass()
},100)()
}
/*
*funcrotation
*实例化函数
*@paraobj实例化的具体参数
*@value返回具体实例
*/
win.rotation=function(obj){
returnnewRotation(obj)
}
})(document,window)
调用方式
varr2=rotation({
el:'rotation-1',
mode:'easy-in-out',//运动曲线
auto:true,//开启自动轮播
btn:true,//左右按钮
focusBtn:false//焦点
})
window.onresize=function(){
r2&&r2.refresh()
}
精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。