纯js实现轮播图

最新推荐文章于 2023-02-16 13:46:56 发布

她定有过人之处_cherish

最新推荐文章于 2023-02-16 13:46:56 发布

阅读量629

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/wxCSDN1997/article/details/122667912

版权

分为两种情况

1：缩略图正好铺满容器（以五张为例）

<!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>
    <script type="text/javascript" src="./js/jquery-1.8.0.min.js"></script>
    <style>
        .body {
            width: 1920px;
            height: 1080px;
            background-color: antiquewhite;
        }
        
        .lunboImg {
            position: absolute;
            width: 900px;
            height: 600px;
            top: 100px;
            left: 510px;
            /* background-color: aquamarine; */
            overflow: hidden;
        }
        
        #kuang {
            width: 7200px;
            height: 600px;
        }
        
        .Exhibition_item {
            float: left;
            /* opacity: 0; */
            width: 900px;
            height: 600px;
        }
        
        .Exhibition_item img {
            width: 900px;
            height: 600px;
            background-repeat: no-repeat;
        }
        
        .Exhibition_item_active {
            opacity: 1;
        }
        
        .leftButton {
            position: absolute;
            left: 300px;
            top: 400px;
            z-index: 99;
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 100px solid orange;
            border-bottom: 50px solid transparent;
        }
        
        .rightButton {
            position: absolute;
            left: 1570px;
            top: 400px;
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-left: 100px solid orange;
            border-bottom: 50px solid transparent;
            z-index: 99;
        }
        
        .suolveImg {
            position: absolute;
            width: 1000px;
            height: 130px;
            /* background-color: orchid; */
            top: 720px;
            left: 470px;
            margin: auto;
            overflow: hidden;
        }
        
        #svkuang {
            width: 1600px;
            height: 130px;
        }
        
        .sl_item {
            float: left;
            width: 200px;
            height: 130px;
            opacity: 0.7;
        }
        
        .sl_item_active {
            opacity: 1;
        }
        
        .sl_item img {
            width: 185px;
            height: 130px;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="body">
        <div class="leftButton" id="leftButton1"></div>
        <div class="rightButton" id="rightButton1"></div>
        <div class="lunboImg">
            <div id="kuang">
                <div class="Exhibition_item Exhibition_item_active"><img src="img/g1.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g2.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g3.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g4.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g5.jpg" alt=""></div>
            </div>
        </div>

        <div class="suolveImg">
            <div id="svkuang">
                <div class="sl_item sl_item_active"><img src="img/g1.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g2.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g3.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g4.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g5.jpg" alt=""></div>
            </div>
        </div>
    </div>

    <script>
        var index = 0;
        var xdis = 0;
        var xdis2 = 0;
        //向右轮播
        $("#rightButton1").on("click", function() {
            if (index < 4) {
                index++;
                const list = document.getElementById("kuang").children;
                for (let i = 0; i < list.length; i++) {
                    const element = list[i];
                    element.setAttribute('class', index === i ? 'Exhibition_item Exhibition_item_active' : 'Exhibition_item')
                }
                xdis = xdis - 900;
                $('#kuang').css({
                    "transform": 'translate(' + xdis + 'px,0)',
                    "transition-duration": "300ms"
                });


                const list2 = document.getElementById("svkuang").children;
                for (let i = 0; i < list2.length; i++) {
                    const element = list2[i];
                    element.setAttribute('class', index === i ? 'sl_item sl_item_active' : 'sl_item')
                }
            }
        });

        //向左轮播
        $("#leftButton1").on("click", function() {
            if (index > 0) {
                index--;
                const list = document.getElementById("kuang").children;
                for (let i = 0; i < list.length; i++) {
                    const element = list[i];
                    element.setAttribute('class', index === i ? 'Exhibition_item Exhibition_item_active' : 'Exhibition_item')
                }
                xdis = xdis + 900;
                $('#kuang').css({
                    "transform": 'translate(' + xdis + 'px,0)',
                    "transition-duration": "300ms"
                });


                const list2 = document.getElementById("svkuang").children;
                for (let i = 0; i < list2.length; i++) {
                    const element = list2[i];
                    element.setAttribute('class', index === i ? 'sl_item sl_item_active' : 'sl_item')
                }
            }
        });

        //点击缩略图


        $('#svkuang div').click(function() {
            var ind = $('#svkuang div').index(this); //获取当前点击的span下标
            console.log("index :  " + index + "----  ind : " + ind) //弹出第几个

            if (ind < 0 || ind > 4 || ind == index) {
                return;
            }

            if (ind > index) {
                xdis = xdis - (ind - index) * 900;
                $('#kuang').css({
                    "transform": 'translate(' + xdis + 'px,0)',
                    "transition-duration": "300ms"
                });

                const list2 = document.getElementById("svkuang").children;
                for (let i = 0; i < list2.length; i++) {
                    const element = list2[i];
                    element.setAttribute('class', ind === i ? 'sl_item sl_item_active' : 'sl_item')
                }
                index = ind;
            }

            if (ind < index) {
                xdis = xdis + (index - ind) * 900;
                $('#kuang').css({
                    "transform": 'translate(' + xdis + 'px,0)',
                    "transition-duration": "300ms"
                });

                const list2 = document.getElementById("svkuang").children;
                for (let i = 0; i < list2.length; i++) {
                    const element = list2[i];
                    element.setAttribute('class', ind === i ? 'sl_item sl_item_active' : 'sl_item')
                }
                index = ind;
            }
        })
    </script>
</body>

</html>

2. 缩率图大于容器长度（代码没有完全实现求指教）

<!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>
    <script type="text/javascript" src="./js/jquery-1.8.0.min.js"></script>
    <style>
        .body {
            width: 1920px;
            height: 1080px;
            background-color: antiquewhite;
        }
        
        .lunboImg {
            position: absolute;
            width: 900px;
            height: 600px;
            top: 100px;
            left: 510px;
            /* background-color: aquamarine; */
            overflow: hidden;
        }
        
        #kuang {
            width: 7200px;
            height: 600px;
        }
        
        .Exhibition_item {
            float: left;
            /* opacity: 0; */
            width: 900px;
            height: 600px;
        }
        
        .Exhibition_item img {
            width: 900px;
            height: 600px;
            background-repeat: no-repeat;
        }
        
        .Exhibition_item_active {
            opacity: 1;
        }
        
        .leftButton {
            position: absolute;
            left: 300px;
            top: 400px;
            z-index: 99;
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 100px solid orange;
            border-bottom: 50px solid transparent;
        }
        
        .rightButton {
            position: absolute;
            left: 1570px;
            top: 400px;
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-left: 100px solid orange;
            border-bottom: 50px solid transparent;
            z-index: 99;
        }
        
        .suolveImg {
            position: absolute;
            width: 1000px;
            height: 130px;
            /* background-color: orchid; */
            top: 720px;
            left: 470px;
            margin: auto;
            overflow: hidden;
        }
        
        #svkuang {
            width: 1600px;
            height: 130px;
        }
        
        .sl_item {
            float: left;
            width: 200px;
            height: 130px;
            opacity: 0.7;
        }
        
        .sl_item_active {
            opacity: 1;
        }
        
        .sl_item img {
            width: 185px;
            height: 130px;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="body">
        <div class="leftButton" id="leftButton1"></div>
        <div class="rightButton" id="rightButton1"></div>
        <div class="lunboImg">
            <div id="kuang">
                <div class="Exhibition_item Exhibition_item_active"><img src="img/g1.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g2.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g3.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g4.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g5.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g6.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g7.jpg" alt=""></div>
                <div class="Exhibition_item"><img src="img/g8.jpg" alt=""></div>
            </div>
        </div>

        <div class="suolveImg">
            <div id="svkuang">
                <div class="sl_item sl_item_active"><img src="img/g1.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g2.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g3.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g4.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g5.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g6.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g7.jpg" alt=""></div>
                <div class="sl_item"><img src="img/g8.jpg" alt=""></div>
            </div>
        </div>
    </div>

    <script>
        var index = 0;
        var xdis = 0;
        var xdis2 = 0;
        //向右轮播
        $("#rightButton1").on("click", function() {
            if (index < 7) {
                index++;
                const list = document.getElementById("kuang").children;
                for (let i = 0; i < list.length; i++) {
                    const element = list[i];
                    element.setAttribute('class', index === i ? 'Exhibition_item Exhibition_item_active' : 'Exhibition_item')
                }
                xdis = xdis - 900;
                $('#kuang').css({
                    "transform": 'translate(' + xdis + 'px,0)',
                    "transition-duration": "300ms"
                });


                const list2 = document.getElementById("svkuang").children;
                for (let i = 0; i < list2.length; i++) {
                    const element = list2[i];
                    element.setAttribute('class', index === i ? 'sl_item sl_item_active' : 'sl_item')
                }

                if (index >= 4) {
                    xdis2 = xdis2 - 200;
                    $('#svkuang').css({
                        "transform": 'translate(' + xdis2 + 'px,0)',
                        "transition-duration": "300ms"
                    });
                }
            }
        });

        //向左轮播
        $("#leftButton1").on("click", function() {
            if (index > 0) {
                index--;
                const list = document.getElementById("kuang").children;
                for (let i = 0; i < list.length; i++) {
                    const element = list[i];
                    element.setAttribute('class', index === i ? 'Exhibition_item Exhibition_item_active' : 'Exhibition_item')
                }
                xdis = xdis + 900;
                $('#kuang').css({
                    "transform": 'translate(' + xdis + 'px,0)',
                    "transition-duration": "300ms"
                });


                const list2 = document.getElementById("svkuang").children;
                for (let i = 0; i < list2.length; i++) {
                    const element = list2[i];
                    element.setAttribute('class', index === i ? 'sl_item sl_item_active' : 'sl_item')
                }

                if (index >= 3) {
                    xdis2 = xdis2 + 200;
                    $('#svkuang').css({
                        "transform": 'translate(' + xdis2 + 'px,0)',
                        "transition-duration": "300ms"
                    });
                }
            }
        });

        //点击缩略图


        $('#svkuang div').click(function() {
            var ind = $('#svkuang div').index(this); //获取当前点击的span下标
            console.log("index :  " + index + "----  ind : " + ind) //弹出第几个

            if (ind < 0 || ind > 7 || ind == index) {
                return;
            }

            if (ind > index) {
                xdis = xdis - (ind - index) * 900;
                $('#kuang').css({
                    "transform": 'translate(' + xdis + 'px,0)',
                    "transition-duration": "300ms"
                });

                const list2 = document.getElementById("svkuang").children;
                for (let i = 0; i < list2.length; i++) {
                    const element = list2[i];
                    element.setAttribute('class', ind === i ? 'sl_item sl_item_active' : 'sl_item')
                }
                index = ind;
            }

            if (ind < index) {
                xdis = xdis + (index - ind) * 900;
                $('#kuang').css({
                    "transform": 'translate(' + xdis + 'px,0)',
                    "transition-duration": "300ms"
                });

                const list2 = document.getElementById("svkuang").children;
                for (let i = 0; i < list2.length; i++) {
                    const element = list2[i];
                    element.setAttribute('class', ind === i ? 'sl_item sl_item_active' : 'sl_item')
                }
                index = ind;
            }

        })
    </script>
</body>

</html>