php网页如何做轮播图,html轮播图如何实现

html轮播图的实现方法：首先使用一个控件作为图片显示区域，且图片都在相同的区域显示；然后通过Js写个遍历函数，每次只让一张图片显示；最后通过定时器每隔一段时间调用该函数即可。

本教程操作环境：windows7系统、html5版，DELL G3电脑。

html轮播图的实现方法：

1、使用一个控件作为图片显示区域，且图片都在相同的区域显示；

2、通过Js写个遍历函数，每次只让一张图片显示，如style = " display：none "可以影藏其他图片；

3、通过定时器每隔一段时间调用该函数；

4、这里测试的图片是手动添加的地址，可以根据实际需要循环添加；

Html、Javascript：

轮播图测试

测试轮播图

---

// index：索引， len：长度

var index = 0, len;

// 类似获取一个元素数组

var imgBox = document.getElementsByClassName("img-slide");

len = imgBox.length;

imgBox[index].style.display = 'block';

// 逻辑控制函数

function slideShow() {

index ++;

// 防止数组溢出

if(index >= len) index = 0;

// 遍历每一个元素

for(var i=0; i

imgBox[i].style.display = 'none';

}

// 每次只有一张图片显示

imgBox[index].style.display = 'block';

}

// 定时器，间隔3s切换图片

setInterval(slideShow, 3000);

Css：/* 标签选择器 */

p {

text-align: center;

font-size: 25px;

color: cadetblue;

font-family: fantasy;

}

/* id选择器 */

#hr1 {

background-color: cadetblue;

height: 2px;

width: 75%;

}

/* 类选择器 */

.imgbox {

border-top: 5px solid cadetblue;

/* 避免因窗口变化影响图片效果 */

width: 60%;

height: 40%;

margin: 0 auto;

}

.img {

width: 60%;

height: 40%;

margin: 0 auto;

display: none;

}

运行效果：