1、利用圖片width顯示位置來播放圖片，技術：.offsetWidth 、aBtn[i].index = i 、setInterval() 、oUl[0].style.left =? 、onclick()

2、利用數組放入圖片經行輪播，技術：setInterval()。沒有onclick()

圖片輪播12js.html

/p>

"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 baseWidth = aLi[0].offsetWidth;

//alert(baseWidth);

oUl[0].style.width = baseWidth * aLi.length + "px";

var iNow = 0;

for(var i=0;i

aBtn[i].index = i;

aBtn[i].onclick = function() {

//alert(this.index);

//alert(oUl[0].style.left);

move(this.index);

//aIco[this.index].className = "active";

}

}

oBtnLeft.onclick = function() {

iNow ++;

//document.title = iNow;

move(iNow);

}

oBtnRight.onclick = function() {

iNow --;

document.title = iNow;

move(iNow);

}

var curIndex = 0;

var timeInterval = 1000;

setInterval(change,timeInterval);

function change() {

if(curIndex == aBtn.length) {

curIndex =0;

} else {

move(curIndex);

curIndex += 1;

}

}

function move(index) {

//document.title = index;

if(index>aLi.length-1) {

index = 0;

iNow = index;

}

if(index<0) {

index = aLi.length - 1;

iNow = index;

}

for(var n=0;n

aBtn[n].className = "";

}

aBtn[index].className = "active";

oUl[0].style.left = -index * baseWidth + "px";

//buffer(oUl[0],{

//?left: -index * baseWidth

//?},8)

}

}

圖片自動播放.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];

}

??

總結

以上是生活随笔為你收集整理的自动图片轮播php源码,js图片自动轮播代码分享(js图片轮播)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。