网页图片轮播代码

最新推荐文章于 2024-06-26 14:03:25 发布

渡·鸦

最新推荐文章于 2024-06-26 14:03:25 发布

阅读量5.1k

点赞数 5

分类专栏： PHP ASP 文章标签： css html js

本文链接：https://blog.csdn.net/Celloda/article/details/125247687

版权

HTML CSS JavaScript 图片轮播自动切换

关键词由CSDN通过智能技术生成

PHP 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

ASP

2 篇文章 0 订阅

订阅专栏

网页图片轮播代码

先上DIV

<div class="imgBox">
<img class="img-slide img1" src="图片地址1" alt="图片轮播1">
<img class="img-slide img2" src="图片地址2" alt="图片轮播2">
</div>

CSS 样式（宽高均可更改）

.imgBox{
width: 900px;
height: 150px;
margin: 0 auto;

}
.imgBox img{
width: 900px;
height: 150px;
margin: 0 auto;
}
.img1{
display: block;
}
.img2{
display: none;
}

//banner
    var index=0;
    //改变图片
    function ChangeImg() {
        index++;
        var a=document.getElementsByClassName("img-slide");
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
a[i].style.display='none';
        }
        a[index].style.display='block';
    }
    //设置定时器，每隔5秒切换一张图片
    setInterval(ChangeImg,5000);