轮播图的实现

简介: 轮播图的实现

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

第一步:搭建框架

<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>

运行结果:

代码汇总

<!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>


相关文章
|
6月前
|
JavaScript
uniapp写轮播图?
uniapp写轮播图?
|
6月前
|
JavaScript 前端开发
原生js做轮播图
原生js做轮播图
28 0
|
JavaScript 容器
使用 swiper 做轮播图
使用 swiper 做轮播图
782 0
使用 swiper 做轮播图
|
1月前
“节流阀“ 在轮播图的使用
“节流阀“ 在轮播图的使用
27 1
|
5月前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
5月前
|
前端开发 UED
CSS动画(轮播图)
CSS动画(轮播图)
|
6月前
|
JavaScript 前端开发 索引
用四种方法实现轮播图
用四种方法实现轮播图
143 0
|
11月前
|
前端开发
HTML+CSS实现轮播图效果
HTML+CSS实现轮播图效果
|
JavaScript
原生js实现轮播图
vue2走马灯有官方bug无法解决,为此用原生js实现了一个轮播图
160 4
原生js实现轮播图
|
前端开发
超简单的轮播图动画效果 HTML+Css
超简单的轮播图动画效果 HTML+Css