本文实例为大家分享了js实现简单图片轮播的具体代码，最终实现效果图
代码块
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } img { vertical-align: top } .box { width: 490px; height: 170px; margin: 100px auto; padding: 5px; border: 1px solid #ccc; } .inner { width: 490px; height: 170px; background-color: pink; overflow: hidden; position: relative; } .inner ul { width: 1000%; position: absolute; top: 0; left: 0; } .inner li { float: left; } .square { position: absolute; right: 10px; bottom: 10px; } .square span { display: inline-block; width: 16px; height: 16px; background-color: #fff; text-align: center; line-height: 16px; cursor: pointer; } .square span.current { background-color: orangered; color: #fff; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <ul> <li><a href="#"><img src="images/01.jpg" /></a></li> <li><a href="#"><img src="images/02.jpg" /></a></li> <li><a href="#"><img src="images/03.jpg" /></a></li> <li><a href="#"><img src="images/04.jpg" /></a></li> <li><a href="#"><img src="images/05.jpg" /></a></li> </ul> <div class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> </div> <script type="text/javascript"> //鼠标经过按钮 按钮排他 var box = document.getElementById("box"); var inner = box.children[0]; //获取box下的第一个元素，也就是inner var ul = inner.children[0]; //获取inner下的ul var squareList = inner.children[1]; //获取inner下的第二个元素 var squares = squareList.children; //获取所有的按钮 var imgWidth = inner.offsetWidth;// alert(imgWidth); //给每个按钮注册鼠标经过事件 for(var i=0; i<squares.length; i++){ squares[i].index = i; //把索引保存在自定义属性中 squares[i].onmouseover = function(){ //鼠标经过事件 //排他 干掉所有人 for(var j=0; j<squares.length; j++){ squares[j].className = ""; } //留下我自己 this.className = "current"; //以动画的方式把ul移动到指定的位置 //目标 和当前按钮索引有关，和图片宽度有关 而且是负数 var target = -this.index * imgWidth; //获取到索引 animate(ul,target); } } function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = 20; var step = obj.offsetLeft < target ? step : -step; if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) { obj.style.left = obj.offsetLeft + step + "px"; } else { obj.style.left = target + "px"; clearInterval(obj.timer); } }, 15) } </script> </body></html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
