最最最简单的轮播图(JQuery)

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>

View Code

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 }

View Code

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 });

View Code