原生JS写轮播图 | 易学教程

效果图

在这里插入图片描述

HTML

<!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>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="outer">
        <div class="wrapper">
            <!-- <div><img src="./img/banner1.jpg" alt=""></div>
            <div><img src="./img/banner2.jpg" alt=""></div>
            <div><img src="./img/banner3.jpg" alt=""></div>
            <div><img src="./img/banner4.jpg" alt=""></div> -->
        </div>
        <ul id="list">
            <!-- <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
        <a href="javascript:;" id="left"><</a> 
        <a href="javascript:;" id="right">></a>

    </div>

    <script src="./animate.js"></script>
    <script src="./index.js"></script>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

#outer {
    width: 800px;
    height: 300px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

#outer .wrapper {
    width: 4000px;
    position: absolute;
    left: 0;
    height: 300px;
}

.wrapper div {
    width: 800px;
    height: 300px;
    float: left;
}

.wrapper div img {
    width: 800px;
    height: 300px;
}

#outer ul {
    width: 120px;
    height: 30px;
    position: absolute;
    left: 50%;
    margin-left: -60px;
    list-style: none;
    overflow: hidden;
    bottom: 10px;
}

#outer ul li {
    width: 25px;
    height: 25px;
    background: red;
    border-radius: 50%;
    float: left;
    float: left;
    margin-left: 5px;
    cursor: pointer;
}
#outer ul li.select{
    background: chartreuse;
}
#outer a {
    display: inline-block;
    width: 20px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    top: 50%;
    margin-top: -20px;
    background: black;
    color: white;
    position: absolute;
    text-decoration: none;
}

#outer #right {
    right: 0;
}

js

index.js

let wrapper = document.getElementsByClassName("wrapper")[0];
let list = document.getElementById("list");
let outer = document.getElementById("outer")
let data = null;
let xhr = new XMLHttpRequest();
xhr.open("get", "./banner.json", false);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
        data = JSON.parse(xhr.responseText);
    }
}
xhr.send();
// console.log(data);

//绑定数据
let bindHtml = () => {
    let divs = ``;
    let lis = ``;
    data.map(item => {
        divs += `<div><img src="${item.img}" alt=""></div>`;
        lis += `<li></li>`;
    })
    divs += `<div><img src="${data[0].img}" alt=""></div>`;
    wrapper.innerHTML = divs;
    list.innerHTML = lis;
}
bindHtml();

//实现自动轮播 2000ms滑动一张
let step = 0;
wrapper.style.left = 0;
let autoMove = (n) => {
    step++;
    typeof n !== "undefined" ? step=n: null;
    if (step > 4) {
        wrapper.style.left = 0
        step = 1;
    }
    changeTip();
    utils.animate(wrapper, {
        left: -800 * step
    }, 300)
}
let timer = setInterval(autoMove, 2000)

//鼠标移上
outer.onmouseover = function () {
    clearInterval(timer);
}
outer.onmouseout = function () {
    timer = setInterval(autoMove, 2000)
}

//焦点跟随
let lis = document.getElementsByTagName("li");
let changeTip = () => {
    for (var i = 0; i < lis.length; i++) {
        if (step === i) {
            lis[i].classList.add("select");

        } else {
            lis[i].classList.remove("select")
        }
        if (step === 4) {
            lis[0].classList.add("select")
        }
    }
}
changeTip();

//点击焦点图片跟随
let focus = () => {
    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            //1
            // step = i - 1;
            // autoMove()
            //2
            // step=i;
            // utils.animate(wrapper,{left:-800*step},300)
            // changeTip();
            //3
            autoMove(i)
        }
    }
}
focus();

//点击左右
let left = document.getElementById("left");
let right = document.getElementById("right");
let fld = false;
right.onclick = function () {
    if (fld) {
        return;
    }
    fld = true;
    setTimeout(() => {
        fld = false;
    }, 500)
    autoMove();
}
left.onclick = function () {
    if (fld) {
        return
    }
    fld = true;
    setTimeout(() => {
        fld = false;
    },500)
    step--;
    if (step === -1) {
        wrapper.style.left = -800 * 4 + "px"
        step = 3;

    }
    changeTip();
    utils.animate(wrapper, {
        left: -800 * step
    }, 300)
}

animate.js

var utils = (function () {
    function linear(t, b, c, d) {
        //t 运动过时间  target   b 开始位置 begin   c 总距离  d需要的总时间 duration
        return c / d * t + b;
    }

    function animate(curEle, target, duration, callBack) {
        // curEle : 要运动的元素
        // target : 目标位置
        // duration : 总时间
        //callBack : 动作结束执行的函数
        let begin = {};
        let change = {};
        for (let key in target) {
            begin[key] = parseFloat(getComputedStyle(curEle)[key])
            change[key] = target[key] - begin[key]
        }
        let t = 0;
        let timer = setInterval(() => {
            t += 20;
            for (let key in change) {
                let cur = linear(t, begin[key], change[key], duration)
                curEle.style[key] = cur + "px";
            }
            if (t >= duration) {
                clearInterval(timer);
                typeof callBack === "function" ? callBack() : null;
            }
        }, 20);
    }
    return {
        animate
    }
})();

资源

在这里插入图片描述

来源：CSDN

作者：宅男呀

链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/103944766

标签

轮播