HTML实现轮播图的原理,详解js图片轮播效果实现原理

本文实例讲述了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);

}

原理在这呐

首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图片的src属性值，这样就达到了图片的切换，图片的轮播是使用定时器来时显的！setInterval('play()',500)的意思是每0.5s调用一次play()函数！

以上就是js图片轮播效果代码，以及实现js图片轮播效果的原理简介，希望能够帮助大家，真正的做到学以致用。