html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <script src="js/jquery-3.1.0.js"></script> 7 <link rel="stylesheet" href="css/style.css"> 8 </head> 9 <body> 10 </body> 11 <script src="js/main.js"></script> 12 </html>
css:
1 * { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 } 6 7 #showBox { 8 width: 500px; 9 height: 400px; 10 background: coral; 11 overflow: hidden; 12 } 13 14 #box { 15 width: 400%; 16 height: 100%; 17 overflow: hidden; 18 transition: all 2s; 19 -webkit-transition: all 2s; 20 } 21 22 .boxLi { 23 float: left; 24 width: 500px; 25 height: 100%; 26 27 }
js:
1 $(function () { 2 3 var colors = ["red", "blue", "green", "yellow"]; 4 5 //布局 6 function layout() { 7 var showBox = $("<div></div>").attr("id", "showBox"); 8 $("body").append(showBox); 9 var box = $("<ul></ul>").attr("id", "box"); 10 showBox.append(box); 11 for (var i = 0; i < colors.length; i++) { 12 var oli = $("<li></li>").addClass("boxLi"); 13 oli.css({ 14 background: colors[i] 15 }); 16 box.append(oli); 17 } 18 } 19 20 //动起来 21 22 function move() { 23 var index = 1; 24 var page = 1; 25 26 function start() { 27 $("#box").css({transform: "translateX(" + -500 * index + "px)"}); 28 index += page; 29 if (index >= colors.length - 1) { 30 page = -page; 31 } else if (index <= 0) { 32 page = -page; 33 } 34 } 35 36 setInterval(function () { 37 start(); 38 }, 5000); 39 } 40 41 42 function init() { 43 layout(); 44 move(); 45 } 46 47 init(); 48 });