html轮播图

作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
座右铭：未来是不可确定的，慢慢来是最快的。
个人主页：极客李华-CSDN博客
合作方式：私聊+
这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧

简介：本博客以最通俗移动的详细代码，告诉用户如何构建轮播图。

第一步：搭建框架

<body>
    <!-- 整体框架 -->
    <div class="overall">
        <!-- 内容  -->
        <div class="content">
            <!-- 轮播图片 -->
            <ul>
                <li><img src="./imgs/1.jpg" alt=""></li>
                <li><img src="./imgs/2.jpg" alt=""></li>
                <li><img src="./imgs/3.jpg" alt=""></li>
            </ul>
            <!-- 轮播图的点 -->
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>        
    </div>
</body>

第二步：CSS渲染

<style>
    /* 设置整体大框架 */
    .overall{
        /* 设置窗口大小 */
        width: 900px;
        height: 500px;

        /* 将弹性 <div> 元素的所有项目的居中对齐 */
        align-items: center;

        /* 设置图片外边距 左右居中 上方5% */
        margin: 5% auto;        
    }

    .content{
        /* 设置相对定位 */
        position: relative;
        height: 400px;
    }

    .content ul{
        /* 去除标签<ul><li></li></ul>默认加的样式 */
        list-style-type: none;
    }

    .content ul>li{
        width: 600px;
        height: 300px;

        /* 设置绝对定位 */
        position: absolute;

        /* 设置过度效果 时间为1s */
        transition: 1s;

        /* 设置最大透明度 默认一开始图片为透明的 当下面js加载的时候
            第一张图片设置为不透明
        */
        opacity: 0;
    }
    
    /* 设置每个图片的样式 */
    .content ul>li img{    
        /* 设置每一张图片的大小 */
        width: 900px;
        height: 500px;

        /* 设置圆角边框 */
        border-radius: 5%;
     
        /* 设置边框样式 */
        border: 5px solid #0e0600;        
    }

    /* 设置轮播图下面的小点 */
    .content ol{
        /* 设置相对定位 */
        position: relative;

        /* 设置网格布局 */
        display: grid;
        
        /* 设置网格布局中的列数及宽度 */
        grid-template-columns: repeat(3, 75px);

        /* 设置网格布局中的行数及宽度 */
        grid-template-rows: auto;

        /* 设置网格行与列之间的间隙 */
        /* 间隙为1em */
        grid-gap: 1em;
        gap:1em;

        /* 右浮动 */
        float: right;

        /* 设置浮点的向上的内边距 */
        margin-top: 450px;

        /* 去除列表样式 */
        list-style: none;

        /* 把图像的上边缘设置在其包含元素上边缘之下0px高的位置 */
        top: 0;

        /* 把图像的左边缘设置在其包含元素上边缘之下0px高的位置 */
        left: 0;
    }

    .content ol li{
        /* 设置每个小点的大小 */
        width: 25px;
        height: 10px;

        /* 设置里面的文字的大小 */
        font-size: 15px;

        /* line-height 属性设置行间的距离（行高） */
        line-height: 20px;

        /* 浮动左对齐 */
        float: left;

        /* 设置文本居中 */
        text-align: center;

        /* 把表格做成圆点 */
        border-radius: 2em;

        /* 设置圆点的边框 */
        border: 5px solid #af9d9d;
    }
</style>

第三步：JS逻辑

<script>
    // 当页面载入的时候加载这个函数
    window.onload = function()
    {

    // 获取大盒子的内容 为content的第一个元素 也就是ul中的内容
    var content = this.document.getElementsByClassName("content")[0];

    // 获取ul中的li
    var li = content.getElementsByTagName("li");

    // 函数传入两个参数，(i,j)
    function fun(i, j)
    {//转换图片函数，就是把透明度改了一下        
        li[i].style.opacity=1;
        li[j].style.opacity=0;

        // 然后也把小图标的颜色改一下
        // 把图标改成白色
        // 如果图片数量发生改变 那么下面的3也要变成图片的数量
        li[i + 3].style.backgroundColor = "#ffffff";

        // 把图标改成透明
        li[j + 3].style.backgroundColor = "#00000000";
    }

    // 默认情况下轮播图为第一张
    fun(0, 1);//初始化下
    var i = 0;
    function auto()
    {//轮播循环函数
        i ++;
        // 当数组越界的时候
        if(i >= 3)
        {
        // 置为0
            i = 0;
            // 然后递归重新开始
            // 这里的2位3-1的意思
            fun(0, 2);
        }
        else
        {
            // 反之递归
            fun(i, i - 1);
        } 
    }
    // 设置变化的时间
    timer = this.setInterval(auto, 2000);

    // 设置鼠标在轮播图上的时候 轮播图就停止播放
    content.onmouseover = function () 
    { 
        //鼠标划上去，停止轮播
        clearInterval(timer);
    }

    // 设置鼠标在轮播图上的时候 轮播图就继续播放
    content.onmouseout = function () 
    { 
        //鼠标划出，继续轮播
        timer = setInterval(auto, 2000); //调用定时器
    }
    var j = 0;
    for(; j < 3; j++)
    {
        //点击小图标也可以转换图片
        li[j + 3].index = j;
        // 当点击小图标进行的函数
        li[j + 3].onclick = function()
        {
            fun(this.index, i)
            i = this.index;
        }
    }
}
</script>

运行结果：
在这里插入图片描述](https://img-blog.csdnimg.cn/7c70b6b47dbd43e29f7072ffc4afd452.png)

代码汇总

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple14介绍</title>
    <style>
        /* 设置整体大框架 */
        .overall{
            /* 设置窗口大小 */
            width: 900px;
            height: 500px;
    
            /* 将弹性 <div> 元素的所有项目的居中对齐 */
            align-items: center;
    
            /* 设置图片外边距 左右居中 上方5% */
            margin: 5% auto;        
        }
    
        .content{
            /* 设置相对定位 */
            position: relative;
            height: 400px;
        }
    
        .content ul{
            /* 去除标签<ul><li></li></ul>默认加的样式 */
            list-style-type: none;
        }
    
        .content ul>li{
            width: 600px;
            height: 300px;
    
            /* 设置绝对定位 */
            position: absolute;
    
            /* 设置过度效果 时间为1s */
            transition: 1s;
    
            /* 设置最大透明度 默认一开始图片为透明的 当下面js加载的时候
                第一张图片设置为不透明
            */
            opacity: 0;
        }
        
        /* 设置每个图片的样式 */
        .content ul>li img{    
            /* 设置每一张图片的大小 */
            width: 900px;
            height: 500px;
    
            /* 设置圆角边框 */
            border-radius: 5%;
         
            /* 设置边框样式 */
            border: 5px solid #0e0600;        
        }
    
        /* 设置轮播图下面的小点 */
        .content ol{
            /* 设置相对定位 */
            position: relative;
    
            /* 设置网格布局 */
            display: grid;
            
            /* 设置网格布局中的列数及宽度 */
            grid-template-columns: repeat(3, 75px);
    
            /* 设置网格布局中的行数及宽度 */
            grid-template-rows: auto;
    
            /* 设置网格行与列之间的间隙 */
            /* 间隙为1em */
            grid-gap: 1em;
            gap:1em;
    
            /* 右浮动 */
            float: right;
    
            /* 设置浮点的向上的内边距 */
            margin-top: 450px;
    
            /* 去除列表样式 */
            list-style: none;
    
            /* 把图像的上边缘设置在其包含元素上边缘之下0px高的位置 */
            top: 0;
    
            /* 把图像的左边缘设置在其包含元素上边缘之下0px高的位置 */
            left: 0;
        }
    
        .content ol li{
            /* 设置每个小点的大小 */
            width: 25px;
            height: 10px;
    
            /* 设置里面的文字的大小 */
            font-size: 15px;
    
            /* line-height 属性设置行间的距离（行高） */
            line-height: 20px;
    
            /* 浮动左对齐 */
            float: left;
    
            /* 设置文本居中 */
            text-align: center;
    
            /* 把表格做成圆点 */
            border-radius: 2em;
    
            /* 设置圆点的边框 */
            border: 5px solid #af9d9d;
        }
    </style>
    
</head>

<body>
    <!-- 整体框架 -->
    <div class="overall">
        <!-- 内容  -->
        <div class="content">
            <!-- 轮播图片 -->
            <ul>
                <li><img src="./imgs/1.jpg" alt=""></li>
                <li><img src="./imgs/2.jpg" alt=""></li>
                <li><img src="./imgs/3.jpg" alt=""></li>
            </ul>
            <!-- 轮播图的点 -->
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>        
    </div>
</body>

<script>
    // 当页面载入的时候加载这个函数
    window.onload = function()
    {

    // 获取大盒子的内容 为content的第一个元素 也就是ul中的内容
    var content = this.document.getElementsByClassName("content")[0];

    // 获取ul中的li
    var li = content.getElementsByTagName("li");

    // 函数传入两个参数，(i,j)
    function fun(i, j)
    {//转换图片函数，就是把透明度改了一下        
        li[i].style.opacity=1;
        li[j].style.opacity=0;

        // 然后也把小图标的颜色改一下
        // 把图标改成白色
        // 如果图片数量发生改变 那么下面的3也要变成图片的数量
        li[i + 3].style.backgroundColor = "#ffffff";

        // 把图标改成透明
        li[j + 3].style.backgroundColor = "#00000000";
    }

    // 默认情况下轮播图为第一张
    fun(0, 1);//初始化下
    var i = 0;
    function auto()
    {//轮播循环函数
        i ++;
        // 当数组越界的时候
        if(i >= 3)
        {
        // 置为0
            i = 0;
            // 然后递归重新开始
            // 这里的2位3-1的意思
            fun(0, 2);
        }
        else
        {
            // 反之递归
            fun(i, i - 1);
        } 
    }
    // 设置变化的时间
    timer = this.setInterval(auto, 2000);

    // 设置鼠标在轮播图上的时候 轮播图就停止播放
    content.onmouseover = function () 
    { 
        //鼠标划上去，停止轮播
        clearInterval(timer);
    }

    // 设置鼠标在轮播图上的时候 轮播图就继续播放
    content.onmouseout = function () 
    { 
        //鼠标划出，继续轮播
        timer = setInterval(auto, 2000); //调用定时器
    }
    var j = 0;
    for(; j < 3; j++)
    {
        //点击小图标也可以转换图片
        li[j + 3].index = j;
        // 当点击小图标进行的函数
        li[j + 3].onclick = function()
        {
            fun(this.index, i)
            i = this.index;
        }
    }
}
</script>

</html>

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历，让大家更好学习编程，我的抖音，B站也叫极客李华。

html轮播图

第一步：搭建框架

第二步：CSS渲染

第三步：JS逻辑

代码汇总

【Python基础】Python中处理JSON文件的全面指南

Python的json.loads() 方法与json.dumps()方法

华为OD机试C、D卷 - 符号运算（Java & JS & Python & C & C ）

华为OD机试 - 开源项目热度榜单（Java & JS & Python & C & C ）

关于pyecharts中遇到的No module named ‘pyecharts.charts‘问题（附安装过程）

Python 代码轻松实现 HTML 文件及HTML字符串到 PDF 文档的转换

typescript元组

华为OD机试 - 模拟目录管理功能（Java & JS & Python & C & C ）

基于Jquery实现一个cron表达式选择器，分享我在Python开发中走的一些弯路

2023.04.22更新大麦网移动端/M端抢购软件和使用教程

前端哥

Blocked opening '' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. 报错

HTML5-新增表单元素

Dayjs 的一些常用方法

Howler.js HTML5声音引擎

HTML5七夕情人节表白网页制作【css3爱心表白背景特效】HTML CSS JavaScript 520情人节代码制作

前端攻城狮HTML5自查手册

WebView加载不出Html5网页的解决方法，android studio 拾色器，ViewPager高度问题

JavaScript 基础入门

HTML5新手入门指南

HTML5中SVG与Canvas绘图技术的比较及选择依据

1
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

2
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

3
UE4.27支持HTML5

2024-05-07 13:05:261000

4
前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

5
js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

6
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

7
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

8
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

9
移动端css布局大全

2024-02-06 15:02:421000

10
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000