js image automatic carousel code sharing (js image carousel)_javascript skills

1. Use the image width display position to play the image. Technology: .offsetWidth, aBtn[i].index = i, setInterval(), oUl[0].style.left = , onclick() 2. Use an array to put pictures into a carousel, technology: setInterval(). No onclick()

Picture carousel 12js.html

Copy code The code is as follows: "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");

var curIndex = 0; var timeInterval = 1000; setInterval(change,timeInterval); function change() { if(curIndex == aBtn.length) { curIndex =0; } else { move(curIndex); curIndex = 1; }

}

} } 图片自动播放.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 image automatic carousel code sharing (js image carousel)_javascript skills

Related articles