首页 > 代码库 > Javascript图片无缝滚动
Javascript图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影，有的可能是使用插件，其实使用原始的javascript比较简单。
主要的是使用js位置知识。详细
1.innerHTML:设置或获取元素的html标签
2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距
3.offsetWidth:设置或获取指定标签的宽度
4.setInterval():设置方法定时启动
5.clearInterval();清除定时器
效果图：
先睹为快：demo
<!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>
效果演示：demo
原文链接：http://liteng.org/node/29
Javascript图片无缝滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。