如何在html中实现一个轮播图效果

2023-06-06 18:06:01 735人浏览八月长安

摘要

这期内容当中小编将会给大家带来有关如何在html中实现一个轮播图效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。html是什么html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些

这期内容当中小编将会给大家带来有关如何在html中实现一个轮播图效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和CSS+js配合使用并构建优雅的前端网页。

操作环境：windows7系统、HTML5版，DELL G3电脑。

html轮播图的实现方法：

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

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

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

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

Html、javascript：

<!-- 语言: Html、Css、Javascript --><!-- 工具: HbuilderX --><!-- 使用Ctrl+/ 可快速多行注释/取消注释 --><!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>轮播图测试</title>    <!-- 外部导入Css文件，链接式 -->    <link type="text/css" rel="stylesheet" href="css/slideShow.css"/>        </head>        <body>        <p>测试轮播图</p>        <hr id="hr1"/>        <!-- 建立一个div控件作为图片框 -->        <div class="imgBox">            <!-- alt：图片路径失败时替换显示内容 -->            <img class="img-slide img" src="img/img1.jpg" alt="img1">            <img class="img-slide img" src="img/img2.jpg" alt="img2">            <img class="img-slide img" src="img/img3.jpg" alt="img3">            <img class="img-slide img" src="img/img4.jpg" alt="img4">            <img class="img-slide img" src="img/img5.jpg" alt="img5">        </div>    </body>        <script type="text/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<len; i++) {                imgBox[i].style.display = 'none';            }            // 每次只有一张图片显示            imgBox[index].style.display = 'block';        }                // 定时器，间隔3s切换图片        setInterval(slideShow, 3000);            </script>    </html>

Css：

p {    text-align: center;    font-size: 25px;    color: cadetblue;    font-family: fantasy;}#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;}

运行效果：

如何在html中实现一个轮播图效果