js轮播图

最新推荐文章于 2024-05-30 11:27:58 发布

一笑boom

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量81

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/wang1811539550/article/details/131828223

版权

利用transform控制偏移

利用transition设置动画效果

html部分

<!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>轮播图</title>
    <link rel="stylesheet" href="./css/轮播图.css">
</head>

<body>
    <div class="bigbox">
        <div class="box">
            <div class="list">
                <img draggable="false" src="./img/111.jpg" alt="">
            </div>
            <div class="list">
                <img draggable="false" src="./img/112.jpg" alt="">
            </div>
            <div class="list">
                <img draggable="false" src="./img/113.jpg" alt="">
            </div>
            <div class="list">
                <img draggable="false" src="./img/111.jpg" alt="">
            </div>
        </div>
        <div class="cirs">
            <div class="cir cir_active"></div>
            <div class="cir"></div>
            <div class="cir"></div>
        </div>
        <div class="btns">
            <div class="pre">上</div>
            <div class="next">下</div>
        </div>
    </div>
</body>
<script src="./js/轮播图.js"></script>

</html>

css部分

:root {
    --imgwidth: 600px;
    --boxwidth: 2400px;
    --imgheight: 420px
}

* {
    margin: 0;
    padding: 0;
}

.bigbox {
    width: var(--imgwidth);
    height: 500px;
    margin: 200px auto;
    box-sizing: border-box;
    overflow: hidden;
}

.box {
    width: var(--boxwidth);
    height: var(--imgheight);
    display: flex;

}

.list {
    width: var(--imgwidth);
    height: var(--imgheight);
}

.list img {
    width: var(--imgwidth);
    height: var(--imgheight);
}

.cirs {
    display: flex;
}

.cir {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
}

.cirs .cir_active {
    background-color: red;
}

.btns {
    display: flex;
}

.btns div {
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border: 1px solid;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 10px;
}

js部分

let bigbox = document.querySelector('.bigbox');
let box = document.querySelector('.box');
let lists = document.querySelectorAll('.list');
let cirs = document.querySelectorAll('.cir');

let leftIndex = 0;
let imgWidth = -600;
let leftWidth = 0;
function getleftWidth() {
    leftWidth = leftIndex * imgWidth;
}


// 设置焦点
function setcir() {
    cirs.forEach(item => {
        item.classList.remove('cir_active');
    });

    if (leftIndex == 3) {
        cirs[0].classList.add('cir_active');
    } else {
        cirs[leftIndex].classList.add('cir_active');
    }

}
// transform: translateX(10px);
// transition
// 设置滚动
function setTrans() {
    // 正常设置
    getleftWidth();
    box.style.transition = 'all 0.7s ease-out';
    box.style.transform = 'translateX(' + leftWidth + 'px)';
    setcir();
}

// 设置立即滚动
function setTrans1() {
    // 移动到了最后一张，立马切换到第一张，然后开启移动
    getleftWidth();
    box.style.transition = 'all 0s';
    box.style.transform = 'translateX(' + leftWidth + 'px)';
    setTimeout(() => {
        leftIndex = leftIndex + 1;
        setTrans();
    }, 20);
}
function setTrans2() {
    // 移动到了第一张，立马切换到最后一张，然后开启移动
    getleftWidth();
    box.style.transition = 'all 0s';
    box.style.transform = 'translateX(' + leftWidth + 'px)';
    setTimeout(() => {
        leftIndex = leftIndex - 1;
        setTrans();
    }, 20);
}

// 判断设置的类型
function setFn() {
    if (leftIndex > 3) {
        leftIndex = 0;
        setTrans1();
    } else if (leftIndex < 0) {
        leftIndex = 3;
        setTrans2();
    }
    else {
        setTrans();
    }
}

// 开启定时器
let timer;
function setTimer() {
    timer = setInterval(() => {
        leftIndex = leftIndex + 1;
        setFn();
    }, 2000);
}
setTimer();


// 鼠标移入清除定时器
bigbox.onmouseenter = function () {
    clearInterval(timer);
};
// 鼠标移出再次开启定时器
bigbox.onmouseleave = function () {
    setTimer();
};


let pre = document.querySelector('.pre');
let next = document.querySelector('.next');

// 设置点击上下切换
next.onclick = function () {
    leftIndex = leftIndex + 1;
    setFn();
};
pre.onclick = function () {
    leftIndex = leftIndex - 1;
    setFn();
};

// 设置点击焦点切换
cirs.forEach((item, index) => {
    item.onclick = function () {
        console.log(index);
        leftIndex = index;
        setFn();
    };
});



// 设置滑动切换
let downLft = 0;
box.onmousedown = function (event) {
    downLft = event.offsetX;
    event.stopPropagation();
    box.addEventListener('mousemove', (event) => {
        event.stopPropagation();
        box.onmouseup = function (event) {
            if (event.offsetX - downLft > 100) {
                leftIndex = leftIndex - 1;
                setFn();
            } else if (event.offsetX - downLft < -100) {
                leftIndex = leftIndex + 1;
                setFn();
            } else {
                return;
            }
        };
    });
};

其中初始化的imgWidth的可利用js获取指定元素的宽度进而不用再手动进行设置

定时器时间可用一个公共的变量存一下

样式可按照自己心情设置

拖动有点bug，不知道怎么解决