html简单实现自动轮播代码怎么写,html + js 简单实现轮播图

哎，刚刚看到自己昨天写的如何实现搜索框获得了两个喜欢哎，真的是开心，感谢你们的喜欢。

咳咳，回归正题。今天要分享的是如何利用 html + js 实现轮播图。先来看下效果：

图一

图二

当然啦，图片轮播可不止这点东西，有空再完善啦

实现思路如下：

设置所有图片的 display 属性为 none

设置一个 index 用来标志获取到的图片

设置一个定时器，每隔一段时间令 index 自增并将对应的图片的 display 属性改为 block

附上代码：

轮播图实现

/*标题样式*/

p{

text-align: center;

font-size: 25px;

color: cadetblue;

font-family: fantasy;

}

.imgBox{

border-top: 2px solid cadetblue;

width: 50%;

height: 500px;

margin: 0 auto;

}

.imgBox img{

width: 60%;

height: 300px;

margin: 0 auto;

padding-top: 30px;

}

.img1{

display: block;

}

.img2{

display: none;

}

.img3{

display: none;

}

图片轮播

var index=0;

//改变图片

function ChangeImg() {

index++;

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

if(index>=a.length) index=0;

for(var i=0;i

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

}

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

}

//设置定时器，每隔两秒切换一张图片

setInterval(ChangeImg,2000);

如果你觉得我写的还不错的话，点个赞啦~