js实现图片无缝滚动
更新时间:2015年12月23日 09:29:40 作者:jerrylsxu
这篇文章主要介绍了Javascript图片无缝滚动的相关内容,感兴趣的小伙伴们可以参考一下
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> /*conment*/ *{ 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程序设计有所帮助。
相关文章
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
这篇文章主要介绍了JS常见疑难点分析之match,charAt,charCodeAt,map,search用法,结合实例形式较为详细的分析了match,charAt,charCodeAt,map,search的功能,使用方法与相关注意事项,需要的朋友可以参考下2016-12-12Event altKey,ctrlKey,shiftKey属性解析
本篇文章主要是对Event altKey,ctrlKey,shiftKey属性解析了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12
最新评论