js 輪播原理
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
position: relative;
}
.box1{
height: 100px;width: 100px;background-image: url(../../img/1.jpeg);position:absolute;top: 100px;left: 500px;
}
.box2{
height: 100px;width: 100px;background
<head><meta charset="UTF-8"><title></title><style>body{position: relative;}.box1{height: 100px;width: 100px;background-image: url(../../img/1.jpeg);position:absolute;top: 100px;left: 500px;}.box2{height: 100px;width: 100px;background-image: url(../../css3/images/1.jpg);position:absolute;top: 80px;left: 620px;}.box3{height: 100px;width: 100px;background-image: url(../../css3/images/2.jpg);position:absolute;top: 100px;left:740px;}</style><script type="text/javascript">window.onload=function(){var oInput = document.getElementsByTagName('input');var oDiv = document.getElementsByTagName('div');var arr=[];for(var i=0;i<oDiv.length;i++){//使用getStyle函式獲取內聯樣式中的left,top,儲存為二維函式arr.push( [getStyle(oDiv[i],'left'),getStyle(oDiv[i],'top')]);}//點選右按鈕圖片向右面轉換oInput[1].onclick = function(){//將arr[0]新增到函式的最後面，將函式的第一個元素刪除arr.push(arr[0]);arr.shift();for (var i=0;i<oDiv.length;i++) {oDiv[i].style.left = arr[i][0];oDiv[i].style.top = arr[i][1];}}//點選左按鈕圖片向左面轉換 oInput[0].onclick = function(){//在陣列頭部新增一個元素，刪除陣列最後一個元素arr.unshift(arr[arr.length-1]);arr.pop();for (var i=0;i<oDiv.length;i++) {oDiv[i].style.left = arr[i][0];oDiv[i].style.top = arr[i][1];}console.log(arr);}//每隔五秒圖片移動一下function changeStyle(){arr.push(arr[0]);arr.shift();for(var i=0;i<oDiv.length;i++){oDiv[i].style.left = arr[i][0];oDiv[i].style.top = arr[i][1];}}setInterval(changeStyle,5000);//getStyle函式是js的style屬性可以獲得html標籤的樣式，但是不能獲取非行間樣式。function getStyle(obj,attr){if(obj.currentStyle){//ie下return obj.currentStyle[attr];}else{//ff下return getComputedStyle(obj,false)[attr];}}}</script></head><body><input type="button" value="←" /><input type="button" value="→" /><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>