js原生轮播

用来理解轮播图的操作原理

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7              /*轮播图效果*/
 8               .carouselbox{
 9                 position: relative;
10                 height: 600px;
11               }
12               .carousel div{
13                 width: 100%;
14                 height:600px;
15               }
16               .carousel{
17                 height: 600px;
18                 overflow: hidden;
19                 position: relative;
20               }
21               .carousel div:first-child{
22                 background: url("./1.jpg") no-repeat;
23                 background-size:100% 100%;
24               }
25               .carousel div:last-child{
26                 background: url("./2.jpg") no-repeat;
27                 background-size:100% 100%;
28               }
29             
30               #left{
31               position: absolute;
32               top:50%;
33               left: 2%;
34               /*background: transparent;*/
35               opacity:.3;
36               }
37               #left:hover,#right:hover{
38                 opacity:.8;
39               }
40               #right{
41               position: absolute;
42               top:50%;
43               right:2%;
44               opacity:.3;
45               }
46 
47         </style>
48     </head>
49     <body>
50         <div class="carouselbox">
51           <div class="carousel" id="carousel">
52             <div class=""></div>
53             <div class=""></div>
54           </div>
55           <span id="left">
56               <img src="./1.jpg" alt="">
57           </span>
58           <span id="right">
59               <img src="./1.jpg" alt="">
60           </span>
61         </div>
62         
63         <script>
64               var carsouel=document.getElementById("carousel");
65               var list = carousel.children;
66         
67               var left = document.getElementById("left");
68               var right = document.getElementById("right");
69               left.style.marginTop=-left.offsetHeight/2 + "px";
70               right.style.marginTop=-right.offsetHeight/2 + "px";
71               var height = carousel.offsetHeight;
72               // (list.length-1)*height;
73               left.onclick=function(){
74                 var currentheight = list[0].offsetTop;
75                 if (Math.abs(currentheight) >= (list.length-1)*height){
76                   list[0].style.marginTop = 0+"px";
77                 }else{
78                   list[0].style.marginTop=(currentheight - height) + "px";
79                   }
80               }
81         
82               right.onclick=function(){
83                 var currentheight = list[0].offsetTop;
84                 if (currentheight >= 0){
85                   list[0].style.marginTop =-(list.length-1)*height +"px";
86                 }else{
87                   list[0].style.marginTop=(currentheight + height) + "px";
88                   }
89               }
90 
91         </script>
92     </body>
93 </html>

 

posted @ 2017-07-17 17:09  橙云生  阅读(171)  评论(0)  编辑  收藏  举报