轮播图效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } ul { list-style:none; } img{ vertical-align: top; } .box{ height: 200px; width: 900px; margin:100px auto; background-color: deeppink; position: relative; overflow: auto; } .box ul li { float: left; } .box ul { width: 400%; position: absolute; } </style> </head> <body> <div class="box" id="scroll"> <ul> <li><img src="image/1.jpg" alt=""></li> <li><img src="image/2.jpg" alt=""></li> <li><img src="image/3.jpg" alt=""></li> <li><img src="image/4.jpg" alt=""></li> <li><img src="image/1.jpg" alt=""></li> <li><img src="image/2.jpg" alt=""></li> </ul> </div> </body> </html> <script> var scroll = document.getElementById("scroll"); var ul = scroll.children[0]; var num = 0 ; setInterval(autoPlay,5); function autoPlay () { num--; if (num <= -1200){ ul.style.left = 0; num = 0 ; } else { ul.style.left = num + "px"; } } </script>