“图片轮播”的版本间的差异

来自产品维基百科
跳转至： 导航、 搜索
（创建页面，内容为“https://blog.csdn.net/weixin_34088583/article/details/94541693”）
 
第1行： 第1行：
 +
 +
weixin_34088583
 +
 +
2017-12-23 阅读数：4
 +
 +
关注
 +
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>
 +
 +
 +
转载于:https://www.cnblogs.com/xinchenhui/p/8092846.html
 +
 +
 
https://blog.csdn.net/weixin_34088583/article/details/94541693
 
https://blog.csdn.net/weixin_34088583/article/details/94541693

2019年12月7日 (六) 11:39的版本

weixin_34088583

2017-12-23 阅读数：4

关注 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

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 += ''; 40 else document.getElementById("banner_btns").innerHTML += '';

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>


转载于:https://www.cnblogs.com/xinchenhui/p/8092846.html


https://blog.csdn.net/weixin_34088583/article/details/94541693

取自“http://cpwiki.sseuu.com/index.php?title=图片轮播&oldid=20064”