CSS
CSS: <style type="text/css"> #banner { position: relative; 500px; height: 300px; margin: 0 auto; border: 1px solid black; overflow: hidden; } #banner_move { position: relative; top: 0px; left: 0px; height: 300px; 5000px; background-color: #eee; } #banner_move img { 500px; height: 300px; float: left; } #banner_btnleft { position: absolute; left: 0px; top: 50%; margin-top: -40px; 50px; height: 80px; background-color: rgba(0,0,0,0.4); z-index: 99999; text-align: center; line-height: 80px; font-size: 40px; font-weight: bold; color: #fff; cursor: pointer; display: none; } #banner_btnright { position: absolute; right: 0px; top: 50%; margin-top: -40px; 50px; height: 80px; background-color: rgba(0,0,0,0.4); z-index: 99999; text-align: center; line-height: 80px; font-size: 40px; font-weight: bold; color: #fff; cursor: pointer; display: none; } #banner_btns { position: absolute; bottom: 10px; height: 21px; background-color: rgba(0,0,0,0.7); border-radius: 15px; } .banner_btns_item { 13px; height: 13px; background-color: #fff; border-radius: 20px; float: left; margin: 4px; } </style>
HTML
<div id="banner"> <div id="banner_btnleft" onselectstart="return false"><</div> <div id="banner_btnright" onselectstart="return false">></div> <div id="banner_move"> //这里可以插入任意几张图片 <img src="imgs/1.jpg" /> <img src="imgs/2.jpg" /> <img src="imgs/3.jpg" /> </div> <div id="banner_btns"> </div> </div>
JS
<script type="text/javascript"> var timer1; var timer2; var bannerNow = 1; var bannerSpeed = 10; var oMove = document.getElementById('banner_move'); var oLeft = document.getElementById("banner_btnleft"); var oRight = document.getElementById("banner_btnright"); var oBanner = document.getElementById('banner'); var aa = document.getElementById('aaa'); oLeft.onclick = function () { bannerNow -= 1; if (bannerNow < 1) bannerNow = oMove.getElementsByTagName("img").length; StartMove(bannerNow); } oRight.onclick = function () { bannerNow += 1; if (bannerNow > oMove.getElementsByTagName("img").length) bannerNow = 1; StartMove(bannerNow); } oBanner.onmouseover = function () { StopAutoMove(); oLeft.style.display = 'block'; oRight.style.display = 'block'; } oBanner.onmouseout = function () { AutoMove(); oLeft.style.display = ''; oRight.style.display = ''; } AutoMove(); for (var i = 0; i < oBanner.getElementsByTagName('img').length; i++) { if (i == 0) document.getElementById("banner_btns").innerHTML += '<div style="background-color:red;" class="banner_btns_item"></div>'; else document.getElementById("banner_btns").innerHTML += '<div class="banner_btns_item"></div>'; } document.getElementById("banner_btns").style.left = "50%"; document.getElementById("banner_btns").style.marginLeft = '-' + (document.getElementById("banner_btns").offsetWidth / 2) + 'px'; var oBbtns = document.getElementsByClassName('banner_btns_item'); for (var i = 0; i < oBbtns.length; i++) { oBbtns[i].index = i + 1; oBbtns[i].onclick = function () { bannerNow = this.index; StartMove(bannerNow); } } //轮播方法,参数为你要看的页数 function StartMove(ind) { window.clearInterval(timer1); //不管有没有启动定时器,都清空一下,为了保证同时只存在一个定时工作 timer1 = window.setInterval(function () { var finish = (ind - 1) * -500; //计算目标位置 var btns = document.getElementsByClassName('banner_btns_item'); for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } btns[ind - 1].style.backgroundColor = 'red'; //计算速度,实现缓冲 bannerSpeed = Math.ceil(Math.abs((Math.abs(finish) - Math.abs(oMove.offsetLeft)) / 10)); //判断是否结束或是移动方向 if (oMove.offsetLeft == finish) { //结束,停掉定时器 window.clearInterval(timer1); } else { //未结束,继续移动 if (oMove.offsetLeft > finish) //判断是否向右走 oMove.style.left = oMove.offsetLeft - bannerSpeed + 'px'; else //判断是否向左走 oMove.style.left = oMove.offsetLeft + bannerSpeed + 'px'; } }, 20); } //开启自动播放功能 function AutoMove() { window.clearInterval(timer2); timer2 = window.setInterval(function () { bannerNow = bannerNow + 1; if (bannerNow > oMove.getElementsByTagName("img").length) bannerNow = 1; StartMove(bannerNow); }, 2000); } //停止自动播放功能 function StopAutoMove() { window.clearInterval(timer2); } </script>