JavaScript实现简易轮播图

最新推荐文章于 2023-10-06 23:43:32 发布

禾宁30

最新推荐文章于 2023-10-06 23:43:32 发布

阅读量179

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_63905869/article/details/130298481

版权

轮播图在很多网站都能见到，比如淘宝，京东的首页。他们将轮播图放在页面中使其更有动态感，刚具有美观性，一部分还表示一些比较重要的信息。比如手机新发布，需要大力宣传，就可以放在轮播图中，为其做一个宣传。那么我来介绍一下我做的简易的轮播图：

这个简易轮播图总体分为三个部分，我将这三个部分拆开来了，也可以通过将图片设置为背景图片来添加其他两个部分（文字介绍，下面的框框）

html代码以及css代码：

<!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>轮播图</title>
    <style>/*对应的css代码 */
        .slider{
            height: 500px;
            width: 400px;
            border: 1px solid red;
            background-color: rgb(105, 102, 97);
        }
        .main{

        }
        .slider p{
            font-size: 10px;
            text-align: center;
        }
        .a{
            display: flex;
           margin: 0;
           padding: 0;
           list-style: none;
           align-items: center;
        }
        .a li{
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 0%;
            background-color: #fff;
            opacity: 0.4;
            cursor: pointer;

        }
        .a li.active{/* 将小框框变大 */
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="main">
            <img src="../image/mao1.png" alt=""><-- 设置一个图片存放轮播图数据 -->
        </div>
        <p>第一个猫</p>
        <ul class="a"><-- 放置小框框表示第几张图片 -->
            <li class="active"></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

JavaScript代码：

<script>
        //设置数组放置播放的图片以及对应的文字描述
        const a = [{url:'../image/mao1.png',miao:'第一支猫'},
                    {url:'../image/mao2.png',miao:'第二支猫'}]
        //获取对应的标签元素
        let img = document.querySelector('img')
        let p = document.querySelector('p')
        // console.log(img);
        //设置数组下标
        let index = 0
        setInterval(function(){//计时器，1000表示每一秒启动一次
            index++
            if(index > a.length-1)//大于数组长度-1，将下标重置
                index = 0;
            img.src = a[index].url//将img标签的src属性设置为对应的图片链接
            p.innerHTML = a[index].miao//将描述赋给p标签
            document.querySelector('.a .active').classList.remove('active')//删除前面的active选择器
            document.querySelector(`.a li:nth-child(${index+1})`).classList.add('active')//增加当前li的选择器
        },1000)
    </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>轮播图</title>
    <style>
        .slider{
            height: 500px;
            width: 400px;
            border: 1px solid red;
            background-color: rgb(105, 102, 97);
        }
        .main{

        }
        .slider p{
            font-size: 10px;
            text-align: center;
        }
        .a{
            display: flex;
           margin: 0;
           padding: 0;
           list-style: none;
           align-items: center;
        }
        .a li{
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 0%;
            background-color: #fff;
            opacity: 0.4;
            cursor: pointer;

        }
        .a li.active{
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="main">
            <img src="../image/mao1.png" alt="">
        </div>
        <p>第一个猫</p>
        <ul class="a">
            <li class="active"></li>
            <li></li>
        </ul>
    </div>
    <script>
        const a = [{url:'../image/mao1.png',miao:'第一支猫'},
                    {url:'../image/mao2.png',miao:'第二支猫'}]
        let img = document.querySelector('img')
        let p = document.querySelector('p')
        // console.log(img);
        let index = 0
        setInterval(function(){
            index++
            if(index > a.length-1)
                index = 0;
            img.src = a[index].url
            p.innerHTML = a[index].miao
            document.querySelector('.a .active').classList.remove('active')
            document.querySelector(`.a li:nth-child(${index+1})`).classList.add('active')
        },1000)
    </script>
</body>
</html>

这是基本的一个轮播图的一个框架，有需要的可以对其进行改进。谢谢观看

禾宁30

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
JavaScript实现简易轮播图

轮播图在很多网站都能见到，比如淘宝，京东的首页。他们将轮播图放在页面中使其更有动态感，刚具有美观性，一部分还表示一些比较重要的信息。比如手机新发布，需要大力宣传，就可以放在轮播图中，为其做一个宣传。这个简易轮播图总体分为三个部分，我将这三个部分拆开来了，也可以通过将图片设置为背景图片来添加其他两个部分（文字介绍，下面的框框）这是基本的一个轮播图的一个框架，有需要的可以对其进行改进。
复制链接

扫一扫