自动图片轮播php源码,js图片自动轮播代码分享(js图片轮播)

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">

* {

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

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];

}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！