js图片自动轮播代码分享(js图片轮播)_javascript技巧

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 * { margin: 0px; padding: 0px; } li { list-style: none; } img { border: 0; } a { text-decoration: none; } #slide { width: 800px; height: 400px; box-shadow: 0px 0px 5px #c1c1c1; margin: 20px auto; position: relative; overflow: hidden; } #slide ul { position: absolute; left: 0px; top: 0px; height: 400px; width: 11930px; } #slide ul li { width: 800px; height: 400px; overflow: hidden; float: left; } #slide .ico { width: 800px; height: 20px; overflow: hidden; text-align: center; position: absolute; left: 0px; bottom: 10px; z-index: 1; } #slide .ico a { display: inline-block; width: 10px; height:10px; background: url(out.png) no-repeat 0px 0px; margin: 0px 5px; } #slide .ico .active { background: url(out1.png) no-repeat 0px 0px; } #btnLeft { width: 60px; height: 400px; left: 0px; top: 0px; background: url() no-repeat 0px 0px; position: absolute; z-index: 2; } #btnLeft :hover { background: url() no-repeat 0px 0px; } #btnRight { width: 60px; height: 400px; right: 0px; top: 0px; background: url() no-repeat 0px 0px; position: absolute; z-index: 2; } #btnRight :hover { background: url() no-repeat 0px 0px; }

window.onload = function() { var oIco = document.getElementById("ico"); var aBtn = oIco.getElementsByTagName("a"); var oSlide = document.getElementById("slide"); var oUl = oSlide.getElementsByTagName("ul"); var aLi = oUl[0].getElementsByTagName("li"); var oBtnLeft = document.getElementById("btnLeft"); var oBtnRight = document.getElementById("btnRight");

} }

å¾çèªå¨ææ¾.html

å¤å¶ä»£ç ä»£ç å¦ä¸:

images var curIndex = 0; var timeInterval = 1000; var arr = new Array(); arr[0] = "1.jpg"; arr[1] = "2.jpg"; arr[2] = "3.jpg"; arr[3] = "4.jpg"; arr[4] = "5.jpg"; arr[5] = "6.jpg"; arr[6] = "7.jpg"; setInterval(changeImg,timeInterval); function changeImg() { var obj = document.getElementById("obj"); if (curIndex == arr.length-1) { curIndex = 0; } else { curIndex += 1; } obj.src = arr[curIndex]; }

setInterval(test,1000); var array = new Array(); var index = 0; var array = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg"); function test() { var myimg=document.getElementById("imgs"); if(index==array.length-1) { index=0; }else{ index++; } myimg.src=array[index]; } -->

js图片自动轮播代码分享(js图片轮播)_javascript技巧

Artikel berkaitan