如何使用JavaScript实现无缝滚动自动播放轮播图效果

2023-07-18 12:54:03 172

*{ padding:0; margin:0; list-style:none; border:0; } body{ margin:0; background-color:rgb(55,190,89); } .all{ width:500px; height:200px; padding:4px; margin:100pxauto; position:relative; background-color:#fff; border-radius:20px; } .screen{ width:500px; height:200px; border-radius:17px; overflow:hidden; position:relative; } .screenli{ width:500px; height:200px; overflow:hidden; float:left; } .screenul{ position:absolute; left:0; top:0px; width:3000px; } .allol{ position:absolute; right:180px; bottom:10px; line-height:20px; text-align:center; } .allolli{ float:left; width:20px; height:20px; background:#fff; border-radius:10px; border:1pxsolid#ccc; margin-left:10px; cursor:pointer; opacity:0.5; /*透明度*/ } .allolli.current{ opacity:1.0; } #arr{ display:none; z-index:1000; } #arrspan{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.5; border:1pxsolid#fff; border-radius:5px; } #arr#right{ right:5px; left:auto; }

//获取元素 varbox=my$('box'); varscreen=box.children[0]; varul=screen.children[0]; varol=screen.children[1] //获取箭头 vararr=my$('arr'); vararrLeft=my$('left'); vararrRight=my$('right'); varcount=ul.children.length;/*获取图片数量还没有放cloneLi，所以数值是5*/ varimgWidth=screen.offsetWidth;/*获取的图片（盒子）的宽高*/ //1.动态生成序号 for(i=0;i

common.js

functionmy$(id){
returndocument.getElementById(id);
}

//处理浏览器兼容性
//获取第一个子元素
functiongetFirstElementChild(element){
varnode,nodes=element.childNodes,i=0;
while(node=nodes[i++]){
if(node.nodeType===1){
returnnode;
}
}
returnnull;
}

//处理浏览器兼容性
//获取下一个兄弟元素
functiongetNextElementSibling(element){
varel=element;
while(el=el.nextSibling){
if(el.nodeType===1){
returnel;
}
}
returnnull;
}


//处理innerText和textContent的兼容性问题
//设置标签之间的内容
functionsetInnerText(element,content){
//判断当前浏览器是否支持innerText
if(typeofelement.innerText==='string'){
element.innerText=content;
}else{
element.textContent=content;
}
}

//处理注册事件的兼容性问题
//eventName,不带on，clickmouseovermouseout
functionaddEventListener(element,eventName,fn){
//判断当前浏览器是否支持addEventListener方法
if(element.addEventListener){
element.addEventListener(eventName,fn);//第三个参数默认是false
}elseif(element.attachEvent){
element.attachEvent('on'+eventName,fn);
}else{
//相当于element.onclick=fn;
element['on'+eventName]=fn;
}
}

//处理移除事件的兼容性处理
functionremoveEventListener(element,eventName,fn){
if(element.removeEventListener){
element.removeEventListener(eventName,fn);
}elseif(element.detachEvent){
element.detachEvent('on'+eventName,fn);
}else{
element['on'+eventName]=null;
}
}

//获取页面滚动距离的浏览器兼容性问题
//获取页面滚动出去的距离
functiongetScroll(){
varscrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;
varscrollTop=document.body.scrollTop||document.documentElement.scrollTop;
return{
scrollLeft:scrollLeft,
scrollTop:scrollTop
}
}

//获取鼠标在页面的位置，处理浏览器兼容性
functiongetPage(e){
varpageX=e.pageX||e.clientX+getScroll().scrollLeft;
varpageY=e.pageY||e.clientY+getScroll().scrollTop;
return{
pageX:pageX,
pageY:pageY
}
}


//格式化日期对象，返回yyyy-MM-ddHH:mm:ss的形式
functionformatDate(date){
//判断参数date是否是日期对象
//instanceofinstance实例(对象)of的
//console.log(dateinstanceofDate);
if(!(dateinstanceofDate)){
console.error('date不是日期对象')
return;
}

varyear=date.getFullYear(),
month=date.getMonth()+1,
day=date.getDate(),
hour=date.getHours(),
minute=date.getMinutes(),
second=date.getSeconds();

month=month<10?'0'+month:month;
day=day<10?'0'+day:day;
hour=hour<10?'0'+hour:hour;
minute=minute<10?'0'+minute:minute;
second=second<10?'0'+second:second;

returnyear+'-'+month+'-'+day+''+hour+':'+minute+':'+second;
}

//获取两个日期的时间差
functiongetInterval(start,end){
//两个日期对象，相差的毫秒数
varinterval=end-start;
//求相差的天数/小时数/分钟数/秒数
varday,hour,minute,second;

//两个日期对象，相差的秒数
//interval=interval/1000;
interval/=1000;

day=Math.round(interval/60/60/24);
hour=Math.round(interval/60/60%24);
minute=Math.round(interval/60%60);
second=Math.round(interval%60);

return{
day:day,
hour:hour,
minute:minute,
second:second
}
}

animage.js

//vartimerId=null;
//封装动画的函数
functionanimate(element,target){
//通过判断，保证页面上只有一个定时器在执行动画
if(element.timerId){
clearInterval(element.timerId);
element.timerId=null;
}

element.timerId=setInterval(function(){
//步进每次移动的距离
varstep=10;
//盒子当前的位置
varcurrent=element.offsetLeft;
//当从400到800执行动画
//当从800到400不执行动画

//判断如果当前位置>目标位置此时的step要小于0
if(current>target){
step=-Math.abs(step);
}

//Math.abs(current-target)<=Math.abs(step)
if(Math.abs(current-target)<=Math.abs(step)){
//让定时器停止
clearInterval(element.timerId);
//让盒子到target的位置
element.style.left=target+'px';
return;
}
//移动盒子
current+=step;
element.style.left=current+'px';
},5);
}

总结

到此这篇关于如何使用JavaScript实现无缝滚动自动播放轮播图效果的文章就介绍到这了,更多相关js无缝滚动自动播放内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

如何使用JavaScript实现无缝滚动自动播放轮播图效果

热门推荐

随机推荐