#stage {
width: 500px; height: 300px; border: 3px solid black; margin: 100px; overflow: hidden; position: relative; } #banner { width: 3000px; height: 300px; background-color: rosybrown; } .items { width: 500px; height: 300px; color: white; font-size: 150px; text-align: center; line-height: 300px; float: left; } .btn-l, .btn-r { width: 50px; height: 300px; background-color: black; opacity: 0.5; color: white; font-size: 40px; line-height: 300px; text-align: center; position: absolute; top: 0px; } .btn-l { left: 0px; } .btn-r { right: 0px; } .btn-l:hover, .btn-r:hover { cursor: pointer; opacity: 0.2; } .points { position: absolute; bottom: 10px; left: 200px; /*background-color: orangered;*/ width: 125px; height: 20px; } .dot { width: 15px; height: 15px; border-radius: 50%; background-color: gainsboro; float: left; margin-right: 5px; cursor: pointer; } .active { background-color: red; } </style> </head><body>
<div id="stage"> <div class="btn-l"> <</div> <div class="btn-r">></div> <div id="banner"> <div class="items" style="background-color: red;">1</div> <div class="items" style="background-color: blueviolet;">2</div> <div class="items" style="background-color: green;">3</div> <div class="items" style="background-color: yellow;">4</div> <div class="items" style="background-color: brown;">5</div> <div class="items" style="background-color: red;">1</div> </div> <div class="points"> <div data="1" class="dot active"></div> <div data="2" class="dot"></div> <div data="3" class="dot"></div> <div data="4" class="dot"></div> <div data="5" class="dot"></div> </div> </div> </body></html>
<script>// 取对象 var btn_l = document.getElementsByClassName('btn-l')[0]; var btn_r = document.getElementsByClassName("btn-r")[0]; var banner = document.getElementById("banner"); var dots = document.getElementsByClassName('dot');// 定义变量 var count = 1; var arr = [];// 右侧按钮点击事件 btn_r.onclick = function() { if(count < 6) { count++; arr.push(window.setInterval("move_left()", 20)); } else if(count == 6) { count = 1; banner.style.marginLeft = 0 + 'px';count++;
arr.push(window.setInterval("move_left()", 20)); } for(var i = 0; i < dots.length; i++) { dots[i].setAttribute("class", "dot"); } dots[count - 1].setAttribute("class", "dot active"); }// 左侧按钮点击事件 btn_l.onclick = function() { if(count > 1) { count--; arr.push(window.setInterval("move_right()", 20)); }else if(count == 1){ count = 6; banner.style.marginLeft = -2500 + 'px'; count--; arr.push(window.setInterval("move_right()", 20)); } for(var i = 0; i < dots.length; i++) { dots[i].setAttribute("class", "dot"); } dots[count - 1].setAttribute("class", "dot active"); }// 向左移动 function move_left() { if(banner.offsetLeft == (count - 1) * (-500)) { clear(); } else { banner.style.marginLeft = banner.offsetLeft - 20 + "px"; }}
// 向右移动 function move_right() { if(banner.offsetLeft == (count - 1) * (-500)) { clear(); } else { banner.style.marginLeft = banner.offsetLeft + 20 + "px"; } }// 清除所有间隔执行 function clear() { for(var x in arr) { window.clearInterval(arr[x]); } }// 批量添加点击事件 for(var j = 0; j < dots.length; j++) { dots[j].onclick = function() {count_s = this.getAttribute("data");
if(count > count_s) { count = count_s; arr.push(window.setInterval("move_right()", 20)); } else if(count < count_s) { count = count_s; arr.push(window.setInterval("move_left()", 20)); }for(var i = 0; i < dots.length; i++) {
dots[i].setAttribute("class", "dot"); } this.setAttribute("class", "dot active"); } }// 自动轮播 function auto_move(){ if(count < 6) { count++; arr.push(window.setInterval("move_left()", 20)); } else if(count == 6) { count = 1; banner.style.marginLeft = 0 + 'px';count++;
arr.push(window.setInterval("move_left()", 20)); } for(var i = 0; i < dots.length; i++) { dots[i].setAttribute("class", "dot"); } dots[count - 1].setAttribute("class", "dot active"); }// window.setInterval("auto_move()",3000);</script>