<!DOCTYPE html> <html> <head> <title>js轮播图</title> <style type="text/css"> #container{ width: 600px; height: 400px; position: relative; left: 30%; top: 100px; border: 1px solid #000; overflow: hidden ; } #list{ width: 4200px; height: 400px; position: absolute; } #list img{ width: 600px; height:400px; float: left; } #buttons{ height: 15px; width: 250px; position: absolute; bottom: 20px; left: 200px; } #buttons span{ width: 15px; height: 15px; border: 1px solid #fff; border-radius: 50%; background: #333; float: left; margin-right:25px; cursor: pointer; } #buttons .on{ background: orange; } .arrow { display: none; cursor: pointer; position: absolute; top: 180px; left: 20px; width: 40px; height: 40px; font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; background-color: RGBA(0, 0, 0, .4); color: #fff; } .arrow:hover { background-color: RGBA(0, 0, 0, .7); } #container:hover .arrow { display: block; } #next{ left: 540px;} </style> <script> window.onload = function() { var container = document.getElementById("container"); var list = document.getElementById("list"); var buttons = document.getElementById("buttons").getElementsByTagName("span"); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var index = 1; var timer; //animate 函数,在当前left值得基础上向右移动 offset px,如果向左移动距离超过图六位置就变为图一位置,向右移动距离超过图二位置就变为图七位置 function animate(offset) { var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; if (newLeft > -600) { list.style.left = -3000 + 'px'; } if (newLeft < -3000) { list.style.left = -600 + 'px'; } } //将当前显示图片对应的小圆点样式改变 function buttonsShow() { //将所有的小圆点的样式清除 for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == "on") { buttons[i].className = ""; } } //数组从0开始,故index需要-1 buttons[index - 1].className = "on"; } //点击产生查看前一张效果,animate移动距离改变,小圆点显示改变,当index=1时还要查看前一张时,index变为5 prev.onclick = function () { index -= 1; if (index < 1) { index = 5 } buttonsShow(); animate(600); }; //点击产生查看后一张效果,animate移动距离改变,小圆点显示改变 next.onclick = function () { index += 1; if (index > 5) { index = 1 } animate(-600); buttonsShow(); }; //通过定时器调用next.onclick()实现每两秒滚动一次 function play() { //重复执行的定时器 timer = setInterval(function () { next.onclick(); }, 2000) } //清除定时器实现停止滚动 function stop() { clearInterval(timer); } container.onmouseover = stop; //在鼠标进入onmouseover时,停止每两秒滚动一次 container.onmouseout = play; //在鼠标离开onmouseover时,开始每两秒滚动一次 play(); //在onload后就调用play() //为每个小按钮添加onclick事件,当点击按钮时会跳动到按钮对应的图片 for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function() { //优化,当前图片点击当前的小圆点不执行以下代码。 if (this.className == "on") { return; } /* 这里获得鼠标移动到小圆点的位置,用this把index绑定到对象buttons[i]上,去谷歌this的用法 */ /* 由于这里的index是自定义属性,需要用到getAttribute()这个DOM2级方法,去获取自定义index的属性*/ var clickIndex = parseInt(this.getAttribute('index')); var offset = 600 * (clickIndex - index); //这个index是当前图片停留时的index animate(-offset); index = clickIndex; //存放鼠标点击后的位置,用于小圆点的正常显示 buttonsShow(); } } } </script> </head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="img2/05.png" alt=""> <img src="img2/01.png" alt=""> <img src="img2/02.png" alt=""> <img src="img2/03.png" alt=""> <img src="img2/04.png" alt=""> <img src="img2/05.png" alt=""> <img src="img2/01.png" alt=""> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <em id="prev" class="arrow"><</em> <em id="next" class="arrow">></em> </div> </body> </html>
javascript实现轮播图效果
猜你喜欢
转载自blog.csdn.net/shilipeng666/article/details/84492719
今日推荐
周排行