纯原声JS大图轮播

Posted 2020-10-18 _Iniesta

CSS部分：

 

 1 CSS：
 2 <style type="text/css">
 3 #banner {
 4 position: relative;
 5 width: 500px;
 6 height: 300px;
 7 margin: 0 auto;
 8 border: 1px solid black;
 9 overflow: hidden;
10 }
11 
12 #banner_move {
13 position: relative;
14 top: 0px;
15 left: 0px;
16 height: 300px;
17 width: 5000px;
18 background-color: #eee;
19 }
20 
21 #banner_move img {
22 width: 500px;
23 height: 300px;
24 float: left;
25 }
26 
27 #banner_btnleft {
28 position: absolute;
29 left: 0px;
30 top: 50%;
31 margin-top: -40px;
32 width: 50px;
33 height: 80px;
34 background-color: rgba(0,0,0,0.4);
35 z-index: 99999;
36 text-align: center;
37 line-height: 80px;
38 font-size: 40px;
39 font-weight: bold;
40 color: #fff;
41 cursor: pointer;
42 display: none;
43 }
44 
45 #banner_btnright {
46 position: absolute;
47 right: 0px;
48 top: 50%;
49 margin-top: -40px;
50 width: 50px;
51 height: 80px;
52 background-color: rgba(0,0,0,0.4);
53 z-index: 99999;
54 text-align: center;
55 line-height: 80px;
56 font-size: 40px;
57 font-weight: bold;
58 color: #fff;
59 cursor: pointer;
60 display: none;
61 }
62 
63 #banner_btns {
64 position: absolute;
65 bottom: 10px;
66 height: 21px;
67 background-color: rgba(0,0,0,0.7);
68 border-radius: 15px;
69 }
70 
71 .banner_btns_item {
72 width: 13px;
73 height: 13px;
74 background-color: #fff;
75 border-radius: 20px;
76 float: left;
77 margin: 4px;
78 }
79 </style>

 

html部分：

 1 <div id="banner">
 2      <div id="banner_btnleft" onselectstart="return false"><</div>
 3      <div id="banner_btnright" onselectstart="return false">></div>
 4           <div id="banner_move">    //这里可以插入任意几张图片
 5               <img src="imgs/1.jpg" />
 6               <img src="imgs/2.jpg" />
 7               <img src="imgs/3.jpg" />
 8           </div>
 9           <div id="banner_btns">
10           </div>
11 </div>

JS部分：

 1 <script type="text/javascript">
 2     var timer1;
 3     var timer2;
 4     var bannerNow = 1;
 5     var bannerSpeed = 10;
 6     var oMove = document.getElementById(‘banner_move‘);
 7     var oLeft = document.getElementById("banner_btnleft");
 8     var oRight = document.getElementById("banner_btnright");
 9     var oBanner = document.getElementById(‘banner‘);
10     var aa = document.getElementById(‘aaa‘);
11 
12     oLeft.onclick = function () {
13         bannerNow -= 1;
14         if (bannerNow < 1) bannerNow = oMove.getElementsByTagName("img").length;
15         StartMove(bannerNow);
16     }
17 
18     oRight.onclick = function () {
19         bannerNow += 1;
20         if (bannerNow > oMove.getElementsByTagName("img").length) bannerNow = 1;
21         StartMove(bannerNow);
22     }
23 
24     oBanner.onmouseover = function () {
25         StopAutoMove();
26         oLeft.style.display = ‘block‘;
27         oRight.style.display = ‘block‘;
28     }
29 
30     oBanner.onmouseout = function () {
31         AutoMove();
32         oLeft.style.display = ‘‘;
33         oRight.style.display = ‘‘;
34     }
35 
36     AutoMove();
37 
38     for (var i = 0; i < oBanner.getElementsByTagName(‘img‘).length; i++) {
39         if (i == 0) document.getElementById("banner_btns").innerHTML += ‘<div style="background-color:red;" class="banner_btns_item"></div>‘;
40         else document.getElementById("banner_btns").innerHTML += ‘<div class="banner_btns_item"></div>‘;
41     }
42     document.getElementById("banner_btns").style.left = "50%";
43     document.getElementById("banner_btns").style.marginLeft = ‘-‘ + (document.getElementById("banner_btns").offsetWidth / 2) + ‘px‘;
44 
45     var oBbtns = document.getElementsByClassName(‘banner_btns_item‘);
46     for (var i = 0; i < oBbtns.length; i++) {
47         oBbtns[i].index = i + 1;
48         oBbtns[i].onclick = function () {
49             bannerNow = this.index;
50             StartMove(bannerNow);
51         }
52     }
53 
54 
55     //轮播方法，参数为你要看的页数
56     function StartMove(ind) {
57         window.clearInterval(timer1); //不管有没有启动定时器，都清空一下，为了保证同时只存在一个定时工作
58         timer1 = window.setInterval(function () {
59             var finish = (ind - 1) * -500; //计算目标位置
60 
61             var btns = document.getElementsByClassName(‘banner_btns_item‘);
62             for (var i = 0; i < btns.length; i++) {
63                 btns[i].style.backgroundColor = ‘‘;
64             }
65             btns[ind - 1].style.backgroundColor = ‘red‘;
66 
67             //计算速度，实现缓冲
68             bannerSpeed = Math.ceil(Math.abs((Math.abs(finish) - Math.abs(oMove.offsetLeft)) / 10));
69 
70             //判断是否结束或是移动方向
71             if (oMove.offsetLeft == finish) { //结束，停掉定时器
72                 window.clearInterval(timer1);
73             }
74             else { //未结束，继续移动
75                 if (oMove.offsetLeft > finish) //判断是否向右走
76                     oMove.style.left = oMove.offsetLeft - bannerSpeed + ‘px‘;
77                 else //判断是否向左走
78                     oMove.style.left = oMove.offsetLeft + bannerSpeed + ‘px‘;
79             }
80         }, 20);
81     }
82 
83     //开启自动播放功能
84     function AutoMove() {
85         window.clearInterval(timer2);
86         timer2 = window.setInterval(function () {
87             bannerNow = bannerNow + 1;
88             if (bannerNow > oMove.getElementsByTagName("img").length) bannerNow = 1;
89             StartMove(bannerNow);
90         }, 2000);
91     }
92 
93     //停止自动播放功能
94     function StopAutoMove() {
95         window.clearInterval(timer2);
96     }
97 
98 </script>