js無縫滾動效果幾乎在任何網頁上都能看到它的身影，有的可能是使用插件，其實使用原始的javascript比較簡單。
主要的是使用js位置知識。
效果圖：
<!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程序設計有所幫助。
新聞熱點
疑難解答
