我一直觉得仅仅将js应用于前段交互对于理解js是远远不够的，但是经常练习我认为可以夯实js基础。这一块逻辑比较简单也很基础，重点在于对dom的操控和委托事件。需要扎实的html、css基础。同时呢，ES6已经漫天飞舞，公司依然用的ES5标准，极其难受。这对于想提升的童鞋怕是要憋出病来。感兴趣的同学可以将下列代码封装成插件的形式。
整个代码分为三部分：style.css/ curousel.js/ index.html
style.css
* { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { position: relative; width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; } #list { position: absolute; z-index: 1; width: 4200px; height: 400px; } #list img { float: left; width: 600px; height: 400px; } #buttons { position: absolute; left: 250px; bottom: 20px; z-index: 2; height: 10px; width: 100px; } #buttons span { float: left; margin-right: 5px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #333; cursor: pointer; } #buttons .on { background: orangered; } .arrow { position: absolute; top: 180px; z-index: 2; display: none; width: 40px; height: 40px; font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer; } .arrow:hover { background-color: RGBA(0, 0, 0, .7); } #container:hover .arrow { display: block; } #prev { left: 20px; } #next { right: 20px; }curousel.js /* *轮播新手教程，参考博主http://www.cnblogs.com/LIUYANZUO/p/5679753.html *删去了原代码中部分冗余的代码，简化逻辑，同时将代码改为ES6 *采用js原生写就，适合夯实基础，但是，这段代码是毒，极难维护和扩展。 *建议学习此代码了解思路之后看大神写的插件 */ window.onload = function () { let list = document.getElementById( 'list' ); let perv = document.getElementById( 'prev' ); let next = document.getElementById( 'next' ); let buttons = document.getElementById( 'buttons' ).getElementsByTagName( 'span' ); let index = 1; buttons[0].className = 'on'; list.style.left = 0; var buttonsShow = () => { for( let i = 0; i < buttons.length; i++) { buttons[i].className = ''; } buttons[index-1].className = 'on'; } var animation = ( offset ) => { let newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; if( newLeft < -2400 ) { list.style.left = 0 + 'px'; } if( newLeft > 0 ){ list.style.left = -2400 + 'px'; } } prev.onclick = () => { index -= 1; if(index < 1){ index = 5; } buttonsShow(); animation(600); } next.onclick = () => { index += 1; if( index > 5 ){ index = 1; } buttonsShow(); animation( -600 ); } let timer; var play = () => { timer = setInterval( () => { next.onclick(); } , 3000 ); } play(); let container = document.getElementById( 'container' ); var stop = () => { clearInterval( timer ); } container.onmouseover = stop; container.onmouseout = play; for(let i = 0; i < buttons.length; i++ ){ buttons[i].onclick = () => { let clickIndex = parseInt(buttons[i].getAttribute('index')); let offset = 600 * (index - clickIndex); animation(offset); index = clickIndex; buttonsShow(); } } } index.html <!Doctype html> <html> <head> <link rel = "stylesheet" type = "text/css" href = "style.css"> </head> <body> <div id="container"> <div id="list" > <img src="img/1.jpg" alt="1" /> <img src="img/2.jpeg" alt="2" /> <img src="img/3.jpg" alt="3" /> <img src="img/4.jpg" alt="4" /> <img src="img/5.jpg" alt="5" /> </div> <div id="buttons"> <span index="1"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> <script src = "curousel.js" ></script> </body> </html>
访问 https://hopepdm.github.io/curousel/
可以看到轮播效果
