HTML+CSS+JS+JQuery实现轮播图

用前端原生框架加JQuery实现轮播图

虽然现在已经有很多UI框架有轮播图组件去直接使用了，但是还是要自己会写才可以。

效果图

HTML代码

html代码分三个部分，第一个是展示的图片区域，第二个是两边的切换箭头，第三个是中下放的显示第几个图片的切换点。总的结构相对简单。

  <div class="swiperbox">
        <!-- 图片框  放置轮播图片-->
        <div class="swiper">
            <div>
                <img src="./img/1.jpg" alt="">
            </div>
            <div>
                <img src="./img/2.jpg" alt="">
            </div>
            <div>
                <img src="./img/3.jpg" alt="">
            </div>
            <div>
                <img src="./img/1.jpg" alt="">
            </div>
        </div>
        <!-- 点击按钮框 上一页或下一页-->
        <div class="arrow">
            <div class="left">&lt;</div>
            <div class="right">&gt;</div>
        </div>
        <!-- 位置点 确认是在哪种图片-->
        <div class="dot">
            <div class="d1 color"></div>
            <div class="d2"></div>
            <div class="d3"></div>
        </div>
    </div>

CSS代码

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

        .swiperbox {
            position: relative;
            height: 500px;
            width: 1100px;
            margin: 200px auto 0;
            overflow: hidden;
        }

        .swiper {
            position: absolute;
            display: flex;
            left: 0;
        }
        .swiper div {
            height: 500px;
            width: 1100px;
            font-size: 30px;
            font-weight: bold;
            line-height: 500px;
            text-align: center;
            z-index: 9;
        }

        .arrow {
            position: absolute;
            height: 500px;
            width: 1100px;
        }
        .arrow div {
            position: absolute;
            height: 60px;
            width: 40px;
            top: 220px;
            font-size: 30px;
            font-weight: bold;
            line-height: 60px;
            text-align: center;
            z-index: 10;
            background-color: white;
            opacity: 0.5;
            cursor: default;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
        }

        .dot {
            position: absolute;
            display: flex;
            justify-content: space-between;
            height: 30px;
            width: 90px;
            z-index: 10;
            bottom: 0;
            left: 505px;
        }
        .dot div {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            border: 3px solid white;
        }

        .color {
            background-color: black;
        }

        img {
            width: 1100px;
        }
    </style>

JS代码

    // JQuery引入
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    // 工作代码
    <script>
        // 第一个位置
        var index = 1

        // 下一张
        function next() {
            // 若在第三个位置 则先后移到第四个位置 然后将第四个位置替换为第一个 因为第一个和第四个一样的
            if(index==3){
                // 记录位置
                index = 1
                // 后移
                $(".swiper").css("transition", "left 1.5s")
                $(".swiper").css("left","-3300px")
                // 替换为第一个位置
                setTimeout(()=>{
                    $(".swiper").css("transition", "")
                    $(".swiper").css("left","0px")
                },1600)
                $(".d3").removeClass("color")
                $(".d1").addClass("color")
            }else {
                // 当位置为第一个第二个时 移向2,3位置 距离分别是-1100px -2200px
                let str = ".d"+index
                $(str).removeClass("color")
                index = index + 1
                str = ".d"+index
                $(str).addClass("color")
                // 计算位置
                let width = "-"+(index-1)*1100+"px"
                // 后移
                $(".swiper").css("transition", "left 1.5s")
                $(".swiper").css("left",width)
                setTimeout(()=>{
                    $(".swiper").css("transition", "")
                },1500)
            }
        }

        // 上一张
        function pre(){
            // 如果为第一张 则先替换为第四张 再前移到第三张
            // 如果为二三张 这一次前移
            if(index == 1){
                // 前移
                index = 3
                // 替换为第四张
                $(".swiper").css("left", "-3300px")
                // 前移
                setTimeout(()=>{
                    $(".swiper").css("transition", "left 1.5s")
                    $(".swiper").css("left","-2200px")
                },100)
                // 除去过渡效果
                $(".swiper").css("transition", "")
                $(".d1").removeClass("color")
                $(".d3").addClass("color")
            }else{
                // 前移
                let str = ".d"+index
                $(str).removeClass("color")
                index = index - 1
                str = ".d"+index
                $(str).addClass("color")
                // 计算位置
                let width = "-"+(index-1)*1100+"px"
                // 前移
                $(".swiper").css("transition", "left 1.5s")
                $(".swiper").css("left",width)
                //  除去过渡效果
                setTimeout(()=>{
                    $(".swiper").css("transition", "")
                },1500)
            }
        }

        // 下一个
        $(".right").click(function(){
            next()
        })

        // 上一个
        $(".left").click(function(){
            pre()
        })
    
        // 定时任务  向下切换
        function setTimer(){
            setInterval(() => {
                Next()
            }, 4000);
        }

        setTimer()
    </script>