js實現(xiàn)圖片無縫滾動
js無縫滾動效果幾乎在任何網(wǎng)頁上都能看到它的身影,有的可能是使用插件,其實使用原始的javascript比較簡單。
主要的是使用js位置知識。
- 1.innerHTML:設(shè)置或獲取元素的html標簽
- 2.scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距
- 3.offsetWidth:設(shè)置或獲取指定標簽的寬度
- 4.setInterval():設(shè)置方法定時啟動
- 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'); //創(chuàng)建復(fù)制一份內(nèi)容列表 list2.innerHTML=list1.innerHTML; //向左循環(huán)滾動 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實現(xiàn)圖片無縫滾動代碼,希望對大家的學(xué)習(xí)javascript程序設(shè)計有所幫助。
相關(guān)文章
JSON是什么?有哪些優(yōu)點?JSON和XML的區(qū)別?
這篇文章主要介紹了JSON是什么?有哪些優(yōu)點?JSON和XML的區(qū)別?下面就來詳細的介紹兩種的區(qū)別,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-04-04JS數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu)(示例詳解)
在開發(fā)過程中經(jīng)常會出現(xiàn)接口返回整個數(shù)組,我們需要將數(shù)組進行二次處理,這篇文章主要介紹了js?數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu),需要的朋友可以參考下2023-11-11js使用xml數(shù)據(jù)載體實現(xiàn)城市省份二級聯(lián)動效果
這篇文章主要為大家詳細介紹了js使用xml數(shù)據(jù)載體實現(xiàn)城市省份二級聯(lián)動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11JS小功能(offsetLeft實現(xiàn)圖片滾動效果)實例代碼
這篇文章主要介紹了offsetLeft實現(xiàn)圖片滾動效果實例代碼,有需要的朋友可以參考一下2013-11-11javascript 跨瀏覽器開發(fā)經(jīng)驗總結(jié)(五) js 事件
javascript 跨瀏覽器開發(fā)之js 事件的兼容性問題,需要的朋友可以參考下。2010-05-05