來寫一個輪播圖
阿新 • • 發佈：2018-05-12
wid HR off IT IE hid mpat 使用 3rd
輪播圖一直都是JS的經典實現:
有以下要素:
1.html和css布局的考察 浮動, 定位等
2.Dom操作
3.定時器使用與清除
4.遞歸函數的使用
下面是源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .container { height: 300px; width: 600px; background-color: #ccc; margin: 100px auto; position: relative; overflow: hidden; } .picture-list { height: 300px; width: 3000px; list-style: none; position: absolute } .picture-list li { height: 300px; width: 600px; float: left; } img{ height: 300px; width: 600px; } .left, .right { display: inline-block; height: 30px; width: 20px; background-color: #666; text-align: center; opacity: 0.5; line-height: 30px; position: absolute; } .left { top: 135px; } .right { top: 135px; right: 0px; } .point { height: 15px; width: 100px; position: absolute; left: 50%; margin-left: -50px; bottom: 10px; } .point span { display: inline-block; height: 15px; width: 15px; border: 3px solid #000; box-sizing: border-box; border-radius: 50%; } .selected { background-color: #f40; } </style> </head> <body> <div class="container" id="container"> <ul class="picture-list" id="list" style="left: -600px"> <li> <a href=""> <img src="./images/3rd.jpg" alt=""> </a> </li> <li> <a href=""> <img src="./images/1st.jpg" alt=""> </a> </li> <li> <a href=""> <img src="./images/2nd.jpg" alt=""> </a> </li> <li> <a href=""> <img src="./images/3rd.jpg" alt=""> </a> </li> <li> <a href=""> <img src="./images/1st.jpg" alt=""> </a> </li> </ul> <span class="left" id="prev"> <</span> <span class="right" id="next">></span> <div class="point" id="buttons"> <span class="selected" index="1"></span> <span class="" index="2"></span> <span class="" index="3"></span> </div> </div> <script> function $(ele) { return document.getElementById(ele); } var container = $(‘container‘), list = $(‘list‘), buttons = $(‘buttons‘).getElementsByTagName(‘span‘), prev = $(‘prev‘), next = $(‘next‘), index = 1; function showButton() { for (let i = 0; i <= buttons.length; i++) { if (buttons[i].className == ‘selected‘) { buttons[i].className = ‘‘; break; } } buttons[index - 1].className = ‘selected‘; } function prevNext(offset) { var newLeft = parseInt(list.style.left) + offset; time = 300, interval = 10, speed = offset / (time / interval); function go() { if (speed < 0 && parseInt(list.style.left) > newLeft || speed > 0 && parseInt(list.style.left) < newLeft) { list.style.left = parseInt(list.style.left) + speed + ‘px‘; setTimeout(go, interval); } else { list.style.left = newLeft + ‘px‘; console.log(1) if (newLeft > -600) { list.style.left = -1800 + ‘px‘; } else if (newLeft < -1800) { list.style.left = -600 + ‘px‘; } } } go(); } function autoPlay() { timer = setInterval(function () { next.onclick(); }, 3000); } function stop() { clearInterval(timer); } container.onmouseover = stop; container.onmouseout = autoPlay; autoPlay(); prev.onclick = function () { index -= 1; if (index < 1) { index = 3; } showButton(index); prevNext(600); } next.onclick = function () { index += 1; if (index > 3) { index = 1; } showButton(index); prevNext(-600); } for (let i = 0; i <= buttons.length - 1; i++) { buttons[i].onclick = function () { if (this.className == ‘selected‘) { return; } var myIndex = parseInt(buttons[i].getAttribute(‘index‘)); var offSet = -600 * (myIndex - index); index = myIndex; prevNext(offSet); showButton(); } } </script> </body> </html>
來寫一個輪播圖