轮播图的四种写法-----参考李立超

已于 2023-04-30 10:58:08 修改
阅读量125 收藏
点赞数
分类专栏： 前端 文章标签： html css javascript
于 2023-04-30 10:56:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsyyugong/article/details/130446852
版权

        写这个，纯粹是为了给日后的自己一个方便。使用说明：准备5张大小一样的图片，放在同一文件夹下，本代码默认是640px ，390px大小的图片。

第一段代码

手动切换，无定时器版本。用数组存放图片路径，一次加载一张图片，本地服务器还好，在远处服务器上会有延迟。

<!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>Document</title>

    <style>
        .outer {

            width: 640px;
            margin: 50px auto;
            text-align: center;
        }
    </style>

    <script>
        window.onload = function () {
            const img = document.getElementsByTagName("img")[0];

            const prev = document.getElementById("prev");

            const next = document.getElementById("next");

            const info = document.getElementById("info");

           

            const imgArr = [
                    "./images/1.png",
                    "./images/2.png",
                    "./images/3.png",
                    "./images/4.png",
                    "./images/5.png",
            ]

            let current =0;

            info.textContent=`总共${imgArr.length}张图片，当前是第${current+1}张。`;

            prev.onclick=function(){
                current--;
                if(current<0){
                    current=imgArr.length-1;
                }
                img.src = imgArr[current];

                info.textContent=`总共${imgArr.length}张图片，当前是第${current+1}张。`;
                
            }

            next.onclick=function(){
                current++;
                if(current>imgArr.length-1){
                    current=0;
                }
                img.src = imgArr[current];

                info.textContent=`总共${imgArr.length}张图片，当前是第${current+1}张。`;
 
            }
        }

    </script>
</head>

<body>

   

    <div class="outer">
        <p id="info">"总共n张图片，当前是第m张。"</p>

        <div class="img-wrapper">
            <img src="./images/1.png" alt="">
        </div>

        <div class="btn-wrapper">
            <button id="prev">上一张</button>
            <button id="next">下一张</button>
        </div>

    </div>


</body>

</html>

第二段代码

自动切换，有定时器版本。用数组存放图片路径，一次加载一张图片，本地服务器还好，在远处服务器上会有延迟。

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

<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>Document</title>
    <style>
        .outer {
            width: 640px;
            margin: 50px auto;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            /* 
                点击按钮切换图片
            */

            // 获取info
            const info = document.getElementById("info")

            // 获取到图片
            const img = document.getElementsByTagName("img")[0]

            // 获取两个按钮
            const prev = document.getElementById("prev")
            const next = document.getElementById("next")

            // 创建一个数组来存储图片的路径
            const imgArr = [
                "./images/1.png",
                "./images/2.png",
                "./images/3.png",
                "./images/4.png",
                "./images/5.png",
            ]

            // 创建一个变量记录当前图片的索引
            let current = 0


            //图片自动切换功能
            const autobtn = document.getElementById("auto");

            //创建一个变量来存储定时器的id
            let timer

            autobtn.onclick = () => {

                //关闭定时器
                clearTimeout(timer);  //第一次timer还没有赋值,第二次关闭第一个timer.

                //开启定时器，切换图片
                timer = setTimeout(function auto() {
                    next.onclick();

                    timer = setTimeout(auto, 3000);

                }, 3000)
            }




            info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            // 上一张
            prev.onclick = function () {
                //关闭定时器
                clearTimeout(timer); 
                

                current--

                //检查current的值是否合法
                if (current < 0) {
                    // current = 0
                    current = imgArr.length - 1
                }

                img.src = imgArr[current]

                info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            }

            // 点击next按钮后，切换图片
            next.onclick = function () {
                //关闭定时器
                clearTimeout(timer); 


                current++

                if (current > imgArr.length - 1) {
                    // current = imgArr.length - 1
                    current = 0
                }

                // 切换图片 --> 2.png 就是修改img的src属性
                img.src = imgArr[current]

                info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            }
        }
    </script>
</head>

<body>
    <div class="outer">
        <p id="info">
            总共n张图片，当前第m张
        </p>
        <div class="img-wrapper">
            <img src="./images/1.png" alt="这是一个图片" />
        </div>

        <div class="btn-wrapper">
            <button id="prev">上一张</button>
            <button id="auto">自动</button>
            <button id="next">下一张</button>
        </div>
    </div>
</body>

</html>

第三段代码

有定时器，无前后按钮。一次性就加载5张图片，无延迟。

<!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>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            vertical-align: top;
        }

        ul {
            list-style: none;
        }

        .outer {
            width: 640px;
            height: 390px;
            margin: 100px auto;
        }

        .img-list {
            height: 390px;
        }

        .img-list li {  /*元素选择器+类选择器，优先级一样*/
            position: absolute;
            opacity: 0;    /* opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。*/
            transition: opacity 1s;   /*设置过渡效果*/
        }

        li.current {  /*元素选择器+类选择器，优先级一样*/
            z-index: 1;   /*只显示当前图片*/
            opacity: 1;
        }
    </style>

</head>

<body>

    <div class="outer">
        <ul class="img-list">
            <li class="current"><a href="#"><img src="./images/1.png"></a></li>
            <li><a href="#"><img src="./images/2.png"></a></li>
            <li><a href="#"><img src="./images/3.png"></a></li>
            <li><a href="#"><img src="./images/4.png"></a></li>
            <li><a href="#"><img src="./images/5.png"></a></li>
        </ul>
    </div>

    <script>
        //自动切换图片
        setTimeout(function auto() {
            //获取当前显示的图片
            const current = document.querySelector(".img-list .current");  //img-list里面的current。

            // 获取下一个图片
            const next = current.nextElementSibling || document.getElementsByTagName("li")[0]

            // 切换显示状态
            current.classList.remove("current")
            next.classList.add("current")

            setTimeout(auto, 3000)

        }, 3000)
    </script>

</body>

</html>

第四段代码

有定时器，有前后按钮。一次性就加载5张图片，无延迟。

<!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>Document</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        img {
            vertical-align: top;
        }

        ul {
            list-style: none;
        }

        .outer {
            width: 640px;
            height: 390px;
            margin: 100px auto;
            position: relative;  /*2个箭头相对于outer定位*/
        }

        .img-list {
            height: 390px;
        }

        .img-list li {
            /*元素选择器+类选择器，优先级一样*/
            position: absolute;
            opacity: 0;
            /* opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。*/
            transition: opacity 1s;
            /*设置过渡效果*/
        }

        li.current {
            /*元素选择器+类选择器，优先级一样*/
            z-index: 1;
            /*只显示当前图片*/
            opacity: 1;
        }


        /* 
                设置两个箭头的样式
        */
        .prev-next a {
            font-size: 60px;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            position: absolute;      
            height: 60px;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 2;
            opacity: 0.5;
        }

        .prev-next a:hover {
            opacity: 1;
        }

        #next {
            right: 0;
        }
        
    </style>

</head>

<body>

    <div class="outer">
        <ul class="img-list">
            <li class="current"><a href="#"><img src="./images/1.png"></a></li>
            <li><a href="#"><img src="./images/2.png"></a></li>
            <li><a href="#"><img src="./images/3.png"></a></li>
            <li><a href="#"><img src="./images/4.png"></a></li>
            <li><a href="#"><img src="./images/5.png"></a></li>
        </ul>

        <div class="prev-next">
            <a id="prev" href="javascript:;"> <</a>
            <a id="next" href="javascript:;"> ></a>
        </div>
    </div>

    <script>
        //自动切换图片
        setTimeout(function auto() {
            //获取当前显示的图片
            const current = document.querySelector(".img-list .current");  //img-list里面的current。

            // 获取下一个图片
            const next = current.nextElementSibling || document.getElementsByTagName("li")[0]

            // 切换显示状态
            current.classList.remove("current")
            next.classList.add("current")

            setTimeout(auto, 3000)

        }, 3000)



        /* 
            点击按钮切换图片
        */

        const prev = document.getElementById("prev")
        const next = document.getElementById("next")

        prev.onclick = () => {
            changeImg("prev")
        }

        next.onclick = () => {
            changeImg("next")
        }

        /* 
            changeImg 用来切换图片
                参数：
                    dir 切换图片的方向
                        next
                        prev
        
        */
        function changeImg(dir) {
            // 获取当前显示的图片
            const current = document.querySelector(".img-list .current")

            // 获取下一个图片
            let next
            if (dir === "next") {
                next =
                    current.nextElementSibling ||
                    document.getElementsByTagName("li")[0]
            } else if (dir === "prev") {
                next =
                    current.previousElementSibling ||
                    document.querySelector("li:last-child")
            }

            // 切换显示状态
            current.classList.remove("current")
            next.classList.add("current")
        }
    </script>

</body>

</html>

 五张参考图片：

zsyyugong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值