用js实现拖屏滑动轮播图

最新推荐文章于 2022-08-15 22:07:15 发布

原创最新推荐文章于 2022-08-15 22:07:15 发布 · 595 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个自动轮播图，并实现了图片之间的平滑过渡、小圆点指示器的动态变色以及响应式鼠标悬停暂停功能。通过代码解析，读者可以了解轮播图的工作原理，包括图片切换、定时器控制和用户交互响应。

1.布局

<div class="box">
        <ul id="banner" class="ultrans">
            <li><img src="image/1.jpg" alt=""> </li>
            <li><img src="image/2.jpg" alt=""> </li>
            <li><img src="image/3.jpg" alt=""> </li>
            <li><img src="image/4.jpg" alt=""> </li>
            <li><img src="image/5.jpg" alt=""> </li>
        </ul>
        <div class="warp_btn">
            <div class="smallbtn check"></div>
            <div class="smallbtn"></div>
            <div class="smallbtn"></div>
            <div class="smallbtn"></div>
            <div class="smallbtn"></div>
        </div>
    </div>

2.书写样式

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            overflow: hidden;
            width: 700px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid#000;
        }
        ul {
            width: 3500px;
            height: 300px;
            transform: translatex(0px);
        }
        .ultrans {
            transition: transform .5s ease-in-out;
        }
        .box ul li {
            list-style: none;
            float: left;
            width: 700px;
            height: 300px;
        }
        li img {
            width: 700px;
            height: 300px;
        }
        .warp_btn {
            position: absolute;
            left: 320px;
            bottom: 0;
            width: 700px;
            cursor: pointer;
        }
        .smallbtn {
            width: 12px;
            height: 12px;
            display: inline-block;
            border: 1px solid#fff;
            border-radius: 50%;
        }
        .check {
            background-color: #3153ff;
        }
    </style>

3.js代码

<script>
    /*
        * 基本轮播的配置
        * */
    var time = null;//接收计时器
    var speed = 2000;//计时器的延迟时间
    var ulBanner = document.querySelector("#banner");
    var box = document.querySelector(".box");
    var smallbutton = document.querySelectorAll(".smallbtn");
    var nowimage = 0;//记录当前图片显示的索引
    var startX = null;//记录起始点坐标
    var saveTranform = 0;//记录之前的移动距离
    var savebtn = 0;//记录变色按钮的索引

    //克隆第一个li  添加到ul
    ulBanner.appendChild(ulBanner.children[0].cloneNode(true));
    ulBanner.style.width = 700 * ulBanner.children.length + "px";

    function ImageAnimate() {
        //检测是否有过渡类
        if (!ulBanner.classList.contains("ultrans")) {
            ulBanner.classList.add("ultrans");
        }
        nowimage++;
        checkColor();
        ulBanner.style.transform = "translatex(" + (-nowimage * 700) + "px)";
        animateload();
    }
    /*
     * 动画完成之后的方法
     * */
    function animateload() {
        //做一个 ul动画完成时间
        setTimeout(function () {
            //判断nowimage
            if (nowimage >= ulBanner.children.length - 1) {
                nowimage = 0;
                //去掉元素的过渡类
                ulBanner.classList.remove("ultrans");
                ulBanner.style.transform = "translatex(0px)";
            }
            saveTranform = -nowimage * 700;
        }, 500);
    }
    /*
     * 对应点变色的方法
     * */
    function checkColor() {
        smallbutton[savebtn].classList.remove("check");
        //图片变化之后  切换下面点
        savebtn = nowimage >= ulBanner.children.length - 1 ? 0 : nowimage;
        smallbutton[savebtn].classList.add("check");
    }

    /*
     * 循环计时器
     * */
    addInterval();
    function addInterval() {
        time = setInterval(function () {
            ImageAnimate();
        }, speed);
    }


    /*
     * box 事件
     *
     * */
    box.onmouseenter = function () {
        clearInterval(time);
    }
    box.onmouseleave = function () {
        addInterval();
    }
    box.onmousedown = function (e) {
        startX = e.pageX || e.clientX;
        ulBanner.classList.remove("ultrans");
        e.preventDefault();
        //按下之后添加鼠标移动事件
        window.addEventListener("mousemove", moveData);
    }

    document.onmouseup = function () {
        window.removeEventListener("mousemove", moveData);
        ulBanner.classList.add("ultrans");
        //检测当前的移动距离
        if (cx > 0) {
            if (Math.abs(cx) >= 350) {
                nowimage--;
            }
        }
        else if (cx < 0) {
            if (Math.abs(cx) >= 350) {
                nowimage++;
            }
        }
        ulBanner.style.transform = "translatex(" + (-nowimage * 700) + "px)";
        checkColor();
        animateload();
    }
    /*
     * 移动事件监听的方法
     * */
    var cx = 0;
    function moveData(e) {
        var x = e.pageX || e.clientX; //相对当前元素的坐标
        cx = x - startX;
        if (cx > 0) {
            //检测当前图左边有没有图
            if (nowimage <= 0) {
                nowimage = ulBanner.children.length - 1;
                ulBanner.style.transform = "translatex(-3500px)";
                saveTranform = -3500;
            }
        }
        ulBanner.style.transform = "translatex(" + (saveTranform + cx) + "px)";

    }

    /*
     * 小点添加事件  操作
     *
     * */
    for (var i = 0; i < smallbutton.length; i++) {
        smallbutton[i].index = i;
        smallbutton[i].onmouseenter = function () {
            smallbutton[savebtn].classList.remove("check");
            this.classList.add("check");
            savebtn = this.index;
            nowimage = this.index;
            ulBanner.style.transform = "translatex(" + (-nowimage * 700) + "px)";
            saveTranform = -nowimage * 700;
        }
    }
</script>