一个轮播图

这个小项目是在网上看到的，通过它，我第一次使用了CSS,虽然感觉使用起来非常的繁琐，此外我修复了一些bug,加了一张图片，改动了一些地方

附上文件压缩包下载地址：https://i-beta.cnblogs.com/files

HTML代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>轮播图</title>
 6     <link rel="stylesheet" href="demo.css">
 7 </head>
 8 <body>
 9     <div class="wrapper">
10         <div class="box">
11             <ul class = 'imgbox'>
12                 <li class = "imgshow"><img src="img/1.jpg" alt=""></li>
13                 <li class = "imgshow"><img src="img/2.jpg" alt=""></li>
14                 <li class = "imgshow"><img src="img/3.jpg" alt=""></li>
15                 <li class = "imgshow"><img src="img/4.jpg" alt=""></li>
16             </ul>
17         </div>
18         <div class="next"></div>
19         <div class="last"></div>
20         <div class="dot">
21             <ul>
22                 <li class = 'act'><a href="#"></a></li>
23                 <li><a href="#"></a></li>
24                 <li><a href="#"></a></li>
25                 <li><a href="#"></a></li>
26             </ul>
27         </div>
28     </div>
29 </body>
30 
31 <script src="demo.js"></script>
32 </html>

 JS代码：

 1 var timer = null,
 2     timerInv = null,
 3     window_width = 720,
 4     index = 0,
 5     flag = true,
 6     step = 0,
 7     img_count = 5,
 8     newLeft = 0,
 9     locatArr = [0, -720, -1440, -2160,-2880];
10 var box = document.getElementsByClassName('box')[0],
11     dot = document.getElementsByClassName('dot')[0];
12 
13 
14 
15     function disPlay () {
16         var initLeft = parseInt(window.getComputedStyle(box).left);
17         if(index == img_count - 1){
18             moveTo(0);
19             index = 0;
20         }else{
21             moveTo(++index);
22         }
23         console.log("display")
24     }
25     
26 
27 function lastPlay () {
28     if(index == 0){
29         moveTo(4);
30         index = 4;
31     }else{
32         moveTo(--index);
33     }
34     console.log("lastPlay")
35 }
36 function nextPlay () {
37     console.log("nextPlay执行")
38     if(index ==4){
39         moveTo(0);
40         index = 0;
41     }else{
42         moveTo(++index);
43     }
44     console.log("nextPlay执行")
45 }
46 
47 function bindEvent() {
48     var li = dot.getElementsByTagName('li');
49     var next = document.getElementsByClassName('next')[0];
50     var last = document.getElementsByClassName('last')[0];
51     console.log("bindEvent")
52     next.addEventListener('click',function () {
53         clearInterval(timer);
54         nextPlay();
55         timer = setInterval(disPlay,2000);
56         console.log("click nextplay")
57     });
58     last.addEventListener('click',function() {
59         clearInterval(timer);
60         lastPlay();        
61         timer = setInterval(disPlay,2000);
62         console.log("click lastplay")
63     });
64     for(var i = 0; i < 5; i++){
65         (function (j) {
66             li[j].addEventListener('click',function () {
67                 clearInterval(timer);
68                 index = j;
69                 moveTo(index);
70                 timer = setInterval(disPlay,2000);
71             })
72         }(i))        
73     }
74 }
75 
76 function moveTo(location) {
77     console.log("moveTo")
78     var target_position = parseInt(window.getComputedStyle(box).left) - locatArr[location];
79     box.style.left = locatArr[location] + 'px';
80 }
81 
82 function start(){
83     timer= setInterval(disPlay,1000000);
84     var timeDot = setInterval(function (){
85         var dots= document.getElementsByClassName('dot')[0];
86         var singledot= dots.getElementsByTagName('li');
87         for(var i=0;i<4;i++){
88             singledot[i].className= '';
89         }
90         singledot[index].className= 'act';
91     },20);
92     bindEvent();
93     console.log("start")
94 }
95 
96 start();

CSS代码：

 1 *{
 2     margin: 0;
 3     padding: 0;
 4     list-style: none;
 5 }
 6 
 7 body{
 8     background-color: #ccc;
 9 }
10 .wrapper{
11     width: 720px;
12     height: 410px;
13     margin: 100px auto;
14     overflow: hidden;
15     position: relative;
16 }
17 .wrapper .box{
18     width: 500%;
19     position: absolute;
20     left: 0;
21     top: 0;
22     transition: left 1s;
23 }
24 .box ul li{
25     float: left;
26 } 
27 
28 .box img{
29     width: 720px;
30     height: 410px;
31 }
32 .wrapper .next{
33     width: 0px;
34     height: 0px;
35     position: absolute;
36     z-index: 99;
37     right: -17px;
38     top: 185px;
39     border: 30px solid rgba(200,200,200,0.4);
40     border-right-color:transparent;
41     border-top-color: transparent;
42     border-bottom-color: transparent;
43 }
44 .wrapper .next:hover{
45     border: 30px solid rgba(200,200,200,0.9);
46     border-right-color:transparent;
47     border-top-color: transparent;
48     border-bottom-color: transparent;
49     cursor: pointer;
50 }
51 .wrapper .last{
52     width: 0px;
53     height: 0px;
54     position: absolute;
55     z-index: 99;
56     left: -17px;
57     top: 185px;
58     border: 30px solid rgba(200,200,200,0.4);
59     border-left-color:transparent;
60     border-top-color: transparent;
61     border-bottom-color: transparent;
62 }
63 .wrapper .last:hover{
64     border: 30px solid rgba(200,200,200,0.9);
65     border-left-color:transparent;
66     border-top-color: transparent;
67     border-bottom-color: transparent;
68     cursor: pointer;
69 }
70 .wrapper .dot{
71     width: 500px;
72     height: 30px;
73     position: absolute;
74     top: 330px;
75     left: 295px;
76     line-height: 60px;
77 }
78 .wrapper .dot li{
79     width: 15px;
80     height: 15px;
81     background-color:rgba(200,200,200,0.4);
82     border: 2px solid #eee;
83     border-radius: 50%;
84     float: left;
85     margin-right: 20px;    
86     cursor: pointer;
87 }
88 .wrapper .dot li:hover{
89     background-color:rgba(200,200,200,1);
90 }
91 .wrapper .dot .act{
92     background-color:rgba(200,200,200,0.8);
93 }

 

posted @ 2020-02-16 02:22  一只然  阅读(168)  评论(0)  编辑  收藏  举报