|
|
| 第1行： |
第1行： |
| | + | https://www.cnblogs.com/xinchenhui/p/8092846.html |
| | | | |
| − | weixin_34088583
| + | https://blog.csdn.net/Smtime826/article/details/81564178 |
| − | | |
| − | 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 |
