小編給大家分享一下如何使用JS實(shí)現(xiàn)滑屏幻燈片,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
我們提供的服務(wù)有:成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、威縣ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的威縣網(wǎng)站制作公司
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { margin: 0; } #wrap { margin: 100px auto; position: relative; width: 400px; height: 300px; border: 5px solid #000; overflow: hidden; } #list { position: absolute; left: 0; top: 0; width: 400%; list-style: none; padding: 0; margin: 0; } #list li { width: 25%; float: left; } img { vertical-align: top; } #navs { position: absolute; left: 0; bottom: 30px; height: 12px; width: 100%; text-align: center; } #navs a { display: inline-block; width: 12px; height: 12px; vertical-align: top; background: #fff; margin: 0 5px; border-radius: 6px; } #navs .active { background: #f60; } </style> </head> <body> <!-- 練習(xí): 1. 實(shí)現(xiàn)自動(dòng)播放 2. 添加上一張 下一張功能 3. 給下邊的導(dǎo)航添加點(diǎn)擊事件 --> <div id="wrap"> <ul id="list"> <li><img src="pic/1.jpg"/></li> <li><img src="pic/2.jpg"/></li> <li><img src="pic/3.jpg"/></li> <li><img src="pic/4.jpg"/></li> </ul> <nav id="navs"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </nav> </div> <script type="text/javascript" src="startmove.js"></script> <script type="text/javascript"> (function(){ var wrap = document.querySelector('#wrap'); var list = document.querySelector('#list'); var navs = document.querySelectorAll('#navs a'); var wrapW = css(wrap,"width"); list.onmousedown = function(e){ clearInterval(list.timer);//清除動(dòng)畫(huà) var startMouseX = e.clientX; var elX = css(list,"left"); document.onmousemove = function(e){ var nowMouseX = e.clientX; css(list,"left",nowMouseX - startMouseX + elX); }; document.onmouseup = function(e){ document.onmousemove = null; document.onmouseup = null; var left = css(list,"left"); var now = -Math.round(left/wrapW); //獲取到走了幾張圖 console.log(now); now = now<0?0:now; now = now>navs.length-1?navs.length-1:now; left = now * wrapW;//計(jì)算走到這張圖 left需要走的距離 startMove({ el: list, target: { left: -left }, type: "easeOutStrong", time: 800 }); for(var i = 0; i < navs.length; i++){ navs[i].className = ""; } navs[now].className = "active"; }; return false;//阻止默認(rèn)事件(在這的作用阻止圖片被選中) }; })(); </script> </body> </html>
以上是“如何使用JS實(shí)現(xiàn)滑屏幻燈片”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享文章:如何使用JS實(shí)現(xiàn)滑屏幻燈片
文章網(wǎng)址:http://www.muchs.cn/article14/piegde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、網(wǎng)站排名、定制開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)