纯原声JS大图轮播

 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>

 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>

 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>