轮播图一直都是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>
// 先定义一个类似jQuery的获取元素的方法, 方便获取元素
function $(ele) { return document.getElementById(ele); }
// 获取元素 var container = $('container'), list = $('list'), buttons = $('buttons').getElementsByTagName('span'), prev = $('prev'), next = $('next'), index = 1;
// 给轮播图下面的点点添加class名, 作用已定义好的样式 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(); }
// 轮播图自动播放的原理是设置一个定时器, 在规定时间内调用next函数 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>