html 幻灯片原理,js实现幻灯片轮播原理

Insert title here

var timeID;

var image;

var current = 0;

var images = new Array(5);

function init(){

for (var i=1;i<=5;i++){

images[i] = new Image(450,550);

images[i].src = "pictures/"+i+".jpg";

}

image = document.images[0];

}

function setSrc(i){

current = i;

//设置图片src的属性,实现图片的切换

image.src = images[i].src;

}

function pre(){

if (current <= 0){

alert('已经是第一张了');

}else{

current--;

setSrc(current);

}

}

function next(){

if (current >= 5){

alert('已经是最后一张了');

}else{

current++;

setSrc(current);

}

}

function play(){

if (current >= 5){

current = 0;

}

setSrc(++current);

}

1.jpg

首先init()函数用于初始化images数组和image的值,本例中主要是利用setSrc()设置图片的src属性值,

这样就达到了图片的切换,图片的轮播是使用定时器来时显的!setInterval('play()',500)的意思是每

0.5s调用一次play()函数!