js实现图片无缝滚动

时间：2021-05-26

js无缝滚动效果几乎在任何网页上都能看到它的身影，有的可能是使用插件，其实使用原始的javascript比较简单。

主要的是使用js位置知识。

  • 1.innerHTML:设置或获取元素的html标签
  • 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距
  • 3.offsetWidth:设置或获取指定标签的宽度
  • 4.setInterval():设置方法定时启动
  • 5.clearInterval();清除定时器

效果图：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript scroll制作</title></head><body><style> *{ margin: 0; padding: 0; } img{max-width: 100%;} .container{ max-width: 620px; margin: 0 auto; padding-top: 50px; } .text-center{text-align: center;} .list-inline li{ display: inline-block; } .hide{display: none;} hr{ margin:20px 0; } .tag{ background-color: #ccc; padding: 5px 0; } .tag li{ padding: 0 10px; border-left: 1px solid #fff; cursor:pointer; } .tag li:first-child{ border-left: transparent; } .tag li.active{ background-color: #ddd; } .scroll{ position: relative; padding: 10px; margin-bottom: 20px; background-color: #ddd; } .wrap{ overflow: hidden; } .content{ min-width: 3000px; height: 200px; } .content ul{ float: left; } .content ul li{ display: inline-block; max-width: 200px; } #prev,#next{ width: 50px; height: 50px; margin-top: -25px; background-color: #ccc; line-height: 50px; text-align: center; cursor: pointer; } #prev{ position: absolute; left: 0; top:50%; border-radius: 0 25px 25px 0; } #next{ position: absolute; right: 0; top:50%; border-radius: 25px 0 0 25px; }</style> <div class="container"> <h1 class="text-center">图片滚动制作</h1> <hr> <div class="scroll"> <div class="wrap" id="wrap"> <div id="content" class="content" > <ul id="list1"> <li> <img src="freelance.gif" alt=""> </li> <li> <img src="button.gif" alt=""></li> <li> <img src="load.gif" alt=""></li> <li> <img src="straw.gif" alt=""></li> </ul> <ul id="list2"> </ul> </div> </div> <div id="prev"> prev </div> <div id="next"> next </div> </div> </div><script> var wrap=document.getElementById('wrap'); var list1=document.getElementById('list1'); var list2=document.getElementById('list2'); var prev=document.getElementById('prev'); var next=document.getElementById('next'); //创建复制一份内容列表 list2.innerHTML=list1.innerHTML; //向左循环滚动 function scroll(){ if(wrap.scrollLeft>=list2.offsetWidth){ wrap.scrollLeft=0; } else{ wrap.scrollLeft++; } } timer = setInterval(scroll,1); //鼠标停留使用clearInterval() wrap.onmouseover=function(){ clearInterval(timer); } wrap.onmouseout=function(){ timer = setInterval(scroll,1); } //向左加速 function scroll_l(){ if(wrap.scrollLeft>=list2.offsetWidth){ wrap.scrollLeft=0; } else{ wrap.scrollLeft++; } } //向右滚动 function scroll_r(){ if(wrap.scrollLeft<=0){ wrap.scrollLeft+=list2.offsetWidth; } else{ wrap.scrollLeft--; } } prev.onclick=function(){ clearInterval(timer); change(0) } next.onclick=function(){ clearInterval(timer); change(1) } function change(r){ if(r==0){ timer = setInterval(scroll_l,60); wrap.onmouseout = function(){ timer = setInterval(scroll_l,60); } } if(r==1){ timer = setInterval(scroll_r,60); wrap.onmouseout = function(){ timer = setInterval(scroll_r,60); } } } </script> </body></html>

以上就是为大家分享的js实现图片无缝滚动代码，希望对大家的学习javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章