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">
 Â
Â
 <script type="text/javascript"><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> </script>
Â
Â
å¾çèªå¨ææ¾.html
ç«å³å¦ä¹ âJavaå è´¹å¦ä¹ ç¬è®°ï¼æ·±å ¥ï¼âï¼
Â
 Â
 Â
 <script type="text/javascript"> <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> </script>
Â
Â
Â
 Â

Â
















