1、利用图片width显示位置来播放图片，技术：.offsetWidth 、aBtn[i].index = i 、setInterval() 、oUl[0].style.left = 、onclick()2、利用数组放入图片经行轮播，技术：setInterval()。没有onclick() 图片轮播12js.html 复制代码 代码如下: BR> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> images slide <BR> * {<BR> margin: 0px;<BR> padding: 0px;<BR> }<BR> li {<BR> list-style: none;<BR> }<BR> img {<BR> border: 0;<BR> }<BR> a {<BR> text-decoration: none;<BR> }<BR> #slide {<BR> width: 800px;<BR> height: 400px;<BR> box-shadow: 0px 0px 5px #c1c1c1;<BR> margin: 20px auto;<BR> position: relative;<BR> overflow: hidden;<BR> }<BR> #slide ul {<BR> position: absolute;<BR> left: 0px;<BR> top: 0px;<BR> height: 400px;<BR> width: 11930px;<BR> }<BR> #slide ul li {<BR> width: 800px;<BR> height: 400px;<BR> overflow: hidden;<BR> float: left;<BR> }<BR> #slide .ico {<BR> width: 800px;<BR> height: 20px;<BR> overflow: hidden;<BR> text-align: center;<BR> position: absolute;<BR> left: 0px;<BR> bottom: 10px;<BR> z-index: 1;<BR> }<BR> #slide .ico a {<BR> display: inline-block;<BR> width: 10px;<BR> height:10px;<BR> background: url(out.png) no-repeat 0px 0px;<BR> margin: 0px 5px;<BR> }<BR> #slide .ico .active {<BR> background: url(out1.png) no-repeat 0px 0px;<BR> }<BR> #btnLeft {<BR> width: 60px;<BR> height: 400px;<BR> left: 0px;<BR> top: 0px;<BR> background: url() no-repeat 0px 0px;<BR> position: absolute;<BR> z-index: 2;<BR> }<BR> #btnLeft :hover {<BR> background: url() no-repeat 0px 0px;<BR> }<BR> #btnRight {<BR> width: 60px;<BR> height: 400px;<BR> right: 0px;<BR> top: 0px;<BR> background: url() no-repeat 0px 0px;<BR> position: absolute;<BR> z-index: 2;<BR> }<BR> #btnRight :hover {<BR> background: url() no-repeat 0px 0px;<BR> } <br><br> <BR> window.onload = function() {<BR> var oIco = document.getElementById("ico");<BR> var aBtn = oIco.getElementsByTagName("a");<BR> var oSlide = document.getElementById("slide");<BR> var oUl = oSlide.getElementsByTagName("ul");<BR> var aLi = oUl[0].getElementsByTagName("li");<BR> var oBtnLeft = document.getElementById("btnLeft");<BR> var oBtnRight = document.getElementById("btnRight");<br><br> var baseWidth = aLi[0].offsetWidth;<BR> //alert(baseWidth);<BR> oUl[0].style.width = baseWidth * aLi.length + "px";<BR> var iNow = 0;<BR> for(var i=0;i<aBtn.length;i++) { <BR> aBtn[i].index = i;<BR> aBtn[i].onclick = function() {<BR> //alert(this.index);<BR> //alert(oUl[0].style.left);<BR> move(this.index);<BR> //aIco[this.index].className = "active";<BR> }<BR> }<BR> oBtnLeft.onclick = function() {<BR> iNow ++;<BR> //document.title = iNow;<BR> move(iNow);<BR> }<BR> oBtnRight.onclick = function() {<BR> iNow --;<BR> document.title = iNow;<BR> move(iNow);<BR> }<br><br> var curIndex = 0;<BR> var timeInterval = 1000;<BR> setInterval(change,timeInterval);<BR> function change() {<BR> if(curIndex == aBtn.length) {<BR> curIndex =0; <BR> } else {<BR> move(curIndex);<BR> curIndex += 1;<BR> } <P> } <P> function move(index) {<BR> //document.title = index;<BR> if(index>aLi.length-1) {<BR> index = 0;<BR> iNow = index;<BR> }<BR> if(index<0) {<BR> index = aLi.length - 1;<BR> iNow = index;<BR> }<BR> for(var n=0;n<aBtn.length;n++) {<BR> aBtn[n].className = ""; <BR> }<BR> aBtn[index].className = "active";<BR> oUl[0].style.left = -index * baseWidth + "px";<BR> //buffer(oUl[0],{<BR> // left: -index * baseWidth<BR> // },8)<br><br> }<BR> }<BR> å¾çèªå¨ææ¾.html å¤å¶ä»£ç 代ç å¦ä¸: images <BR> var curIndex = 0; <BR> var timeInterval = 1000; <BR> var arr = new Array(); <BR> arr[0] = "1.jpg"; <BR> arr[1] = "2.jpg"; <BR> arr[2] = "3.jpg"; <BR> arr[3] = "4.jpg"; <BR> arr[4] = "5.jpg"; <BR> arr[5] = "6.jpg"; <BR> arr[6] = "7.jpg"; <BR> setInterval(changeImg,timeInterval); <BR> function changeImg() { <BR> var obj = document.getElementById("obj"); <BR> if (curIndex == arr.length-1) { <BR> curIndex = 0; <BR> } else { <BR> curIndex += 1; <BR> } <BR> obj.src = arr[curIndex]; <BR> } <BR>
