本文實例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
