无限循环轮播图之结构布局（原生JS）

html部分

 1 <div class="box" id="box">
 2         <ul>
 3             <li><img src="images/0.jpg" alt=""></li>
 4             <li><img src="images/1.jpg" alt=""></li>
 5             <li><img src="images/2.jpg" alt=""></li>
 6             <li><img src="images/3.jpg" alt=""></li>
 7             <li><img src="images/4.jpg" alt=""></li>
 8         </ul>
 9         <ol id="btn">
10             <li class="on"></li>
11             <li></li>
12             <li></li>
13             <li></li>
14             <li></li>
15         </ol>
16         <a href="javascript:;" id="prev">&laquo;</a>
17         <a href="javascript:;" id="next">&raquo;</a>
18  </div>

CSS 部分

 1     <style>
 2         *{
 3             margin: 0;
 4             padding:0;
 5             list-style: none;
 6         }
 7         a {
 8             text-decoration: none;
 9         }
10         img{
11             vertical-align: top;
12         }
13         .box{
14             position: relative;
15             width: 400px;
16             height: 224px;
17             margin: 100px auto;
18             border:1px solid red;
19             overflow: hidden;
20         }
21         .box ul {
22             position: relative;
23         }
24         .box ul li{
25             position: absolute;
26             left: 400px;
27             top: 0;
28         }
29         .box ul img{
30             width: 400px;
31             height: 224px;
32         }
33         .box ol {
34             position:absolute;
35             left: 50%;
36             bottom:20px;
37             margin-left: -75px;
38             overflow: hidden;
39         }
40         .box ol li{
41             float: left;
42             width: 20px;
43             height: 20px;
44             border-radius: 10px;
45             background: #00925f;
46             margin: 5px;
47             -webkit-transition: 1s ease all;
48             -moz-transition: 1s ease all;
49             -ms-transition: 1s ease all;
50             -o-transition: 1s ease all;
51             transition: 1s ease all;
52             
53         }
54         #prev {
55             position: absolute;
56             font-size: 50px;
57             top: 50%;
58             left: 5px;
59             margin-top: -50px;
60             height: 100px;
61             line-height: 100px;
62             text-align: center;
63 
64             -webkit-transition: 1s all ease ;
65             -moz-transition: 1s all ease ;
66             -ms-transition: 1s all ease ;
67             -o-transition: 1s all ease ;
68             transition: 1s all ease ;
69             
70         }
71         #prev:hover{
72             color: yellow;
73             left: 0;
74         }
75         #next {
76             position: absolute;
77             font-size: 50px;
78             top: 50%;
79             right: 5px;
80             margin-top: -50px;
81             height: 100px;
82             line-height: 100px;
83             text-align: center;
84             -webkit-transition: 1s all ease;
85             -moz-transition: 1s all ease;
86             -ms-transition: 1s all ease;
87             -o-transition: 1s all ease;
88             transition: 1s all ease;
89             
90         }
91         #next:hover {
92             color: yellow;
93             right: 0
94         }
95         .box .on {
96             background: yellow;
97         }
98     </style>

 

posted @ 2016-12-31 15:48  NT.Wang  阅读(330)  评论(0)  编辑  收藏  举报