JS图片切换效果(低配版轮播图)

最新推荐文章于 2023-08-29 19:44:57 发布

你是我遥远万里最牵挂的猪

最新推荐文章于 2023-08-29 19:44:57 发布

阅读量357

点赞数

分类专栏： javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/Leejinian888/article/details/94403225

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 700px;
            height: 450px;
            margin: 50px auto;
            border: 1px solid;
        }

        .up {
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #fff;
        }

        .content {
            height: 390px;
            position: relative;
        }

        .content img {
            height: 390px;
            width: 700px;
        }

        .button {
            width: 100%;
            display: flex;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            height: 50px;
            justify-content: space-between;
        }
        .button span {
            background: rgba(204, 204, 204, 0.5);
            cursor: pointer;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            display: block;
            height: 40px;
            width: 60px;
            color: #fff;
        }
        .button span:nth-child(1){
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        .button span:nth-child(2){
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        .down {
            background-color: #ccc;
            font-size: 18px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="up"></div>
        <div class="content">
            <img src="" alt="" class="pic">
            <div class="button">
                <span class="revious">上一张</span>
                <span class="next">下一张</span>
            </div>

        </div>
        <div class="down"></div>
    </div>

    <script>

        var box = document.querySelector(".box"); //获取元素
        var up = document.querySelector(".up");
        var down = document.querySelector(".down");
        var pic = document.querySelector(".pic");
        var revious = document.querySelector(".revious")
        var next = document.querySelector(".next");
        // console.log(box,up,down,pic,revious,next);      
        //初识化
        var picSrc = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"];
        var picName = ["掌中舞罢箫声绝，三十六宫秋夜长", "唯有知情一片月，曾窥飞鸟入昭阳", "苦心膏沐不论赀，富贵人生各有时", "一枝红艳露凝香，云雨巫山枉断肠", "剧终"]
        var num = 0;
        var temer;  
        up.innerHTML = "1/5";   
        pic.src = picSrc[0];
        down.innerHTML = picName[0];
        next.onclick = function () {
            num++;
            if (num > picSrc.length - 1) {
                num = 0;
            }
            begin();       //调用函数
            // pic.innerHTML = picSrc[num];          //因和下面重复，直接用函数写，更简洁
            // up.innerHTML = num + 1 + "/" + picSrc.length;
            // down.innerHTML = picName[num];
            // pic.src = picSrc[num];
        }
        revious.onclick = function () {
            num--;
            if (num < 0) {
                num = picSrc.length - 1;
            }
            begin();
            // pic.innerHTML = picSrc[num];
            // up.innerHTML = num + 1 + "/" + picSrc.length;
            // down.innerHTML = picName[num];
            // pic.src = picSrc[num];
        }

        function begin() {          //把上面重复部分直接写成函数，然后调用
            pic.innerHTML = picSrc[num];
            up.innerHTML = num + 1 + "/" + picSrc.length;
            down.innerHTML = picName[num];
            pic.src = picSrc[num];
        }

        timer = setInterval(function () {   //设置定时器，让图片自动切换
            next.onclick();
        }, 1000);

        box.onmouseover = function () {     //当鼠标移入div中，清除定时器(停止自动切换)
            clearInterval(timer);
        }
        box.onmouseout = function () {      //当鼠标移出，再次执行定时器
            timer = setInterval(function () {
                next.onclick();
            }, 1000);
        }


    </script>
</body>

</html>

                                 **效果图如下**

在这里插入图片描述

你是我遥远万里最牵挂的猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS图片切换效果(低配版轮播图)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录