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-UA-Compatible" content="ie=edge">
    <title>无缝滚动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .hidden {
            margin: auto;
            width: 1000px;
            height: 200px;
            overflow: hidden;
            /* overflow-x: scroll; */

        }

        .contain {
            width: 2880px;
            height: 200px;
        }
        .picture,
        .repeat {
            width: 1440px;
            height: 200px;
            float: left;
        }

        .picture>img,
        .repeat>img {
            width: 360px;
            height: 200px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="hidden">
        <div class="contain">
            <div class="picture">
                <img src="img/1.jpg" alt="">
                <img src="img/2.jpg" alt="">
                <img src="img/3.jpg" alt="">
                <img src="img/4.jpg" alt="">
            </div>
            <div class="repeat"></div>
        </div>
    </div>
    <script>
        var repeat=document.getElementsByClassName("repeat")[0];
        var picture=document.getElementsByClassName("picture")[0];
        var hidden=document.getElementsByClassName("hidden")[0];
        repeat.innerHTML=picture.innerHTML;
        var speed=0.01;
        hidden.scrollLeft=0;
        res();
        function res(){
            setInterval(function(){
            hidden.scrollLeft-=speed;
            if(hidden.scrollLeft<=0){
                hidden.scrollLeft=1440;
            }
        },1);
        }         

        
    
    </script>
</body>

</html>

简单的图片轮播

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-UA-Compatible" content="ie=edge">
    <title>简单的图片轮播</title>
</head>
<style>
    .outside {
        width: 500px;
        height: 300px;
        margin: auto;
        position: relative;
    }

    img {
        width: 500px;
        height: 300px;
    }

    span {
        width: 30px;
        height: 30px;
        display: block;
        position: absolute;
        top: 135px;
        /* 透明度范围  0-1  透明-不透明 */
        background-color: rgba(221, 221, 221, 0.7);
        color: white;
        font-size: 18px;
        text-align: center;
        line-height: 30px;
        display: none;
    }

    .btnl {
        left: 0px;
    }

    .btnr {
        right: 0px;
    }

    .outside:hover>span {
        display: block;
    }

    .yuan {
        width: 100px;
        height: 8px;
        position: absolute;
        bottom: 15px;
        left: 200px;
        display: flex;
        white-space: nowrap;
        justify-content: space-between;
    }

    .dian {
        height: 8px;
        width: 8px;
        background-color: transparent;
        border: solid 1px rgba(240, 252, 250, 0.986);
        border-radius: 50%;
    }
</style>

<body>
    <div class="outside">
        <span class="btnl">
            <</span> <img src="img/1.jpg" alt="" class="picture">
                <span class="btnr">></span>
                <div class="yuan">
                    <div class="dian"></div>
                    <div class="dian"></div>
                    <div class="dian"></div>
                    <div class="dian"></div>
                </div>

    </div>
    <script>
        var pic = document.getElementsByClassName("picture")[0];
        var outside = document.getElementsByClassName("outside")[0];
        var btnl = document.getElementsByClassName("btnl")[0];
        var btnr = document.getElementsByClassName("btnr")[0];
        var dian = document.getElementsByClassName("dian");
        var num = 0;
        dian[num].style.backgroundColor = "rgba(240, 252, 250, 0.986)";
        lbdh();

        function lbdh() {
            start = setInterval(function () {
                num++;
                for (var i = 0; i < dian.length; i++) {
                    dian[i].style.backgroundColor = "";
                }
                if (num > 4) {
                    num = 1;
                }
                dian[num - 1].style.backgroundColor = "rgba(240, 252, 250, 0.986)";
                pic.src = "img/" + num + ".jpg";
            }, 1000);
        }

        outside.onmouseenter = function () {
            clearInterval(start);
        }
        outside.onmouseleave = function () {
            lbdh();
        }
        btnl.onclick = function () {
            num--;
            if (num < 1) {
                num = 4;
            }
            pic.src = "img/" + num + ".jpg";
        for (var i = 0; i < dian.length; i++) {
            dian[i].style.backgroundColor = "";
        }
        dian[num - 1].style.backgroundColor = "rgba(240, 252, 250, 0.986)"; 
        }
        btnr.onclick = function () {
            num++;
            if (num > 4) {
                num = 1;
            }
            pic.src = "img/" + num + ".jpg";
        for (var i = 0; i < dian.length; i++) {
            dian[i].style.backgroundColor = "";
        }
        dian[num - 1].style.backgroundColor = "rgba(240, 252, 250, 0.986)";
        }
        
    </script>
</body>

</html>
上一篇:类与对象


下一篇:xinixn -点赞数