js實(shí)現(xiàn)無縫滾動(dòng)圖(可控制當(dāng)前滾動(dòng)的方向)
這個(gè)版本可以控制左右滾動(dòng),鼠標(biāo)點(diǎn)擊對(duì)應(yīng)的廣告會(huì)自動(dòng)滑動(dòng)把廣告完全展示出來。還實(shí)現(xiàn)了記錄當(dāng)前滾動(dòng)的方向,當(dāng)鼠標(biāo)離開,接著繼續(xù)滾動(dòng)?。?!
效果圖:
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type = "text/css"> *{margin: 0; padding: 0;} li { list-style: none; } .box { width: 800px; height: 450px; margin: 50px auto; overflow: hidden; position: relative; } .box span { width: 40px; height: 60px; display: block; position: absolute; top: 225px; margin-top: -20px; cursor: pointer; z-index: 1; } .box #left { background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042311cbd7gbjd7sggkd2b.png') no-repeat; left: 0; display: none; } .box #right { background: url('http://cdn.attach.qdfuns.com/notes/pics/201701/14/042241w8z4hx4m4pjhyjzs.png') no-repeat; right: 0; display: none; } #ad { width: 4000px; height: 450px; position: absolute; } #ad li { float: left; } </style> <script type = "text/javascript"> window.onload = function(){ var ad = document.getElementById("ad"); var lef = document.getElementById("left"); var rig = document.getElementById("right"); var timer = null; //管理定時(shí)器 var aspect = true; function animate(obj,speed){ //關(guān)閉上一個(gè)定時(shí)器 clearInterval(obj.timer); //管理定時(shí)器 obj.timer = setInterval(autoAd,30); function autoAd(){ //判斷左走或者右走 if(speed > 0){ aspect = true; if(obj.offsetLeft >= 0){ obj.style.left = -3200 + 'px'; } }else { aspect = false; if(obj.offsetLeft <= -3200){ obj.style.left = 0; } } //勻速動(dòng)畫: 盒子當(dāng)前的位置 + 步長(zhǎng) obj.style.left = obj.offsetLeft + speed +"px"; } } animate(ad,-5); //鼠標(biāo)劃入顯示控制按鈕并關(guān)閉 ad.parentNode.onmouseover = function(){ clearInterval(ad.timer); lef.style.display = "block"; rig.style.display = "block"; }; //鼠標(biāo)離開隱藏控制按鈕并啟動(dòng)定時(shí)器 ad.parentNode.onmouseout = function(){ clearInterval(ad.timer); clearInterval(timer); lef.style.display = "none"; rig.style.display = "none"; if(aspect){ animate(ad,5); }else{ animate(ad,-5); } }; ad.onclick = function(event){ //關(guān)閉自動(dòng)輪播定時(shí)器 clearInterval(ad.timer); clearInterval(timer); var event = event || window.event; if(event.target){ var target = - parseInt(event.target.alt) * 800; }else{ var target = - parseInt(event.srcElement.alt) * 800; } timer = setInterval(function(){ var step = (target - ad.offsetLeft) / 10; step = step > 0 ? Math.ceil(step):Math.floor(step); ad.style.left = ad.offsetLeft + step + "px"; if(ad.offsetLeft%800 == 0){ clearInterval(timer); } },20) } //右移動(dòng) lef.onclick = function(){ clearInterval(timer); animate(ad,5); }; //左移動(dòng) rig.onclick = function(){ clearInterval(timer); animate(ad,-5); }; } </script> </head> <body> <div class="box"> <ul id="ad"> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt="0"></li> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152pfbkbfe8vbtvulfu.jpg" alt="1"></li> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153u3jgn0ds43ndd3dz.jpg" alt="2"></li> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042152juuohne22z60hbsb.jpg" alt="3"></li> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201701/14/042153lscsitwp7sszb6zs.jpg" alt="4"></li> </ul> <span id="left"></span> <span id="right"></span> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- 徹底搞懂JS無縫滾動(dòng)代碼
- js 實(shí)現(xiàn)無縫滾動(dòng) 兼容IE和FF
- div+css+js實(shí)現(xiàn)無縫滾動(dòng)類似marquee無縫滾動(dòng)兼容firefox
- jcarousellite.js 基于Jquery的圖片無縫滾動(dòng)插件
- js向上無縫滾動(dòng),網(wǎng)站公告效果 具體代碼
- js實(shí)現(xiàn)圖片無縫滾動(dòng)特效
- 走馬燈效果代碼js appendChild實(shí)現(xiàn)的無縫滾動(dòng)
- JS左右無縫滾動(dòng)(一般方法+面向?qū)ο蠓椒ǎ?/a>
- Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動(dòng)實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)無縫滾動(dòng)圖
相關(guān)文章
js 手機(jī)號(hào)碼合法性驗(yàn)證代碼集合
下面是JS驗(yàn)證電話號(hào)碼的代碼,很實(shí)用,獻(xiàn)給大家2012-09-09可以自動(dòng)輪換的頁(yè)簽 tabs with auto play fucntion
HTML、CSS方面改寫了一下結(jié)構(gòu),用了一個(gè)DL javascript方面可以選擇不斷自動(dòng)循環(huán),或者只循環(huán)一次的,點(diǎn)擊以后繼續(xù)循環(huán),或者停止循環(huán)2008-02-02JavaScript實(shí)現(xiàn)動(dòng)態(tài)生成表格案例詳解
本文主要介紹了通過JavaScript實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加表格的案例,當(dāng)點(diǎn)擊添加按鈕時(shí),可以彈出一個(gè)表單,然后將輸入的內(nèi)容添加到表格中,也可以將表格中的整行內(nèi)容清除。感興趣的可以學(xué)習(xí)一下2021-12-12微信小程序?qū)崿F(xiàn)監(jiān)聽頁(yè)面滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)監(jiān)聽頁(yè)面滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06當(dāng)json鍵為數(shù)字時(shí)的取值方法解析
對(duì)于數(shù)字鍵名或者非正常變量字符(比如有空格),必須使用 aa[x]的方式2013-11-11js扁平數(shù)組和樹結(jié)構(gòu)相互轉(zhuǎn)換處理方法
這篇文章主要給大家介紹了關(guān)于js扁平數(shù)組和樹結(jié)構(gòu)相互轉(zhuǎn)換處理方法的相關(guān)資料,之前面試有遇到過這個(gè)問題,面試官問如何把一個(gè)數(shù)組數(shù)據(jù)扁平,然后轉(zhuǎn)化為Tree結(jié)構(gòu)數(shù)據(jù),工作中剛好也用到了,所以總結(jié)下,需要的朋友可以參考下2023-07-07使用RN Animated做一個(gè)“添加購(gòu)物車”動(dòng)畫的方法
這篇文章主要介紹了使用RN Animated做一個(gè)“添加購(gòu)物車”動(dòng)畫的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09