图片轮播php不用js,12行原生JS代码实现最简单的图片轮播

图片轮播

js新手。如果有错误，请指出，请原谅。

``

//

左箭头

右箭头

// 4.21

// 将所有URL放入一个数组，将index的值设置为0

var imgs = ["picture/俄罗斯.jpg","picture/加拿大枫叶.jpg","picture/澳大利亚.jpg","picture/澳大利亚2.jpg","picture/加拿大枫叶.jpg","picture/澳大利亚.jpg"];

var index = 0;

var stopValue = 0；

var startValue = 0;

// 获取img的src属性值，通过对index进行加1，将对应的数组元素设置为img的src属性。

function carousel(){

var img = document.getElementsByTagName("img")[0]

if (index < imgs.length-1) {

index++;

img.setAttribute("src",imgs[index]);

} else { // 当index值变成5，进入循环时，将img的src属性设置为第一个url地址，同时index值变为0

img.setAttribute("src","picture/俄罗斯.jpg")

index = 0;

}

}

// 4.22 鼠标进入stop，鼠标离开start功能.

//鼠标移动到箭头所在的元素清楚定时器，鼠标离开则恢复轮播

// 定义两个全局变量stopValue 和startValue 为0；

// onmouseover和onmouseout从进入对应的元素范围到离开对应的元素范围会执行很多次，

// 通过两个全局全局变量，让它不管在对应的元素范围内如何移动都只执行一次，

// 避免setInterval时间出错。

function stop(){

stopValue+=1;

if(stopValue < 2){

clear();

// 当第一次onmouseover和onmouseout事件完成之后，全局变量的值改变，

// 通过将两个全局变量的值归零，保证之后的onmouseover和onmouseout能执行。

startValue = 0

}

};

function start(){

startValue+=1;

if(startValue < 2){

setInt()

// 同上。

stopValue = 0;

}

};

function clear() {

clearInterval(int)

};

function setInt(){

// 定时器被clearInterval取消后，需要重新设置定时器。

int = setInterval("carousel()",1000)

};

// 利用定时器开始轮播

var int= setInterval("carousel()",1000)