<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Banner</title> <style> *{ margin: 0; padding: 0; } .banner{ width: 600px; height: 400px; margin: 20px auto; overflow: hidden; } .banner>ul.slider{ list-style: none; height: 100%; } ul.slider>li{ float: left; } ul.slider>li,ul.slider>li>img{ height: 100%; } ul.slider>li>img{ width: 100%; } .stranslateMove{ animation: stranslateX 3s infinite; -webkit-animation: stranslateX 3s infinite; } @keyframes stranslateX{ from{ margin-left: 0; } to{ margin-left: -600px; } } @-webkit-keyframes stranslateX{ from{ margin-left: 0; } to{ margin-left: -600px; } } button{ display: block; margin: 0 auto; } </style> </head> <body> <div class="banner"> <ul class="slider "> <li class="stranslateMove"> <img src="banner1.jpg"> </li> <li> <img src="banner2.jpg"> </li> <li> <img src="banner3.jpg"> </li> <li> <img src="banner4.jpg"> </li> <li> <img src="banner5.jpg"> </li> </ul> </div> <p> <button class="pause">pause</button> </p> <script type="text/javascript"> !function(){ function initBanner(){ // 初始化轮播容器的宽度,让每张图片的宽度等于容器的宽度 var slider = document.querySelector(".slider"), //轮播容器 bannerWidth = document.querySelector(".banner").offsetWidth, //视图容器宽度 liWidth = document.querySelectorAll(".slider>li"), sliderlen = liWidth.length + 2; console.log(bannerWidth); for(var i = 0; i<liWidth.length;i++){ liWidth[i].style.width = bannerWidth + 'px'; } slider.style.width = bannerWidth * sliderlen + 'px'; } initBanner(); }(); var t; function autoPlay(){ document.querySelector(".slider>li:first-child").className = ""; document.querySelector(".slider").appendChild(document.querySelector(".slider>li:first-child")); document.querySelector(".slider>li:first-child").className = "stranslateMove"; t = setTimeout("autoPlay()",3000); } setTimeout("autoPlay()",3000); document.querySelector("button").onclick = function(){ clearTimeout(t); document.querySelector(".slider>li:first-child").className = ""; } </script> </body> </html>