js 左右滑动切换图片

最新推荐文章于 2024-07-16 18:30:00 发布
青田。
最新推荐文章于 2024-07-16 18:30:00 发布
阅读量1.9k
点赞数 3
分类专栏： JavaScript 文章标签： javascript 开发语言
本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/131390628
版权
JavaScript 专栏收录该内容
26 篇文章 0 订阅
订阅专栏
一、效果图

二、代码

<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: #000;
            padding: 0 35px;
        }
        img {
            margin-left: 10px;
            width: calc(100%/3);
            height: 340px;
            object-fit: cover;
        }
        .wrapper{
            max-width: 1200px;
            position: relative;
        }
       .wrapper .carousel{
            white-space: nowrap;
            font-size: 0px;
            cursor: pointer;
            overflow: hidden;
            scroll-behavior: smooth;
       }
       .wrapper .carousel img:first-child{
          margin-left: 0px;
       }
       .carousel.dragging {
        scroll-behavior: auto;
        cursor: grab;
       }
       .carousel.dragging img {
        pointer-events: none;
       }
       .wrapper i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 46px;
        width: 46px;
        text-align: center;
        line-height: 46px;
        cursor: pointer;
        border-radius: 50%;
        font-size: 1.2rem;
        background-color: #fff;
       }
       .wrapper i:first-child{
        left: -23px;
        display: none;
       }
       .wrapper i:last-child{
        right: -23px;
       }
       @media screen and (max-width: 900px) {
        .carousel img {
            width: calc(100% / 2);
        }
       }
       @media screen and (max-width: 550px) {
        .carousel img {
            width: 100%;
        }
       }
    </style>
</head>
<body>
    <div class="wrapper">
        <i id="left" class="fa-solid fa-angle-left"></i>
        <div class="carousel">
            <img src="https://pics6.baidu.com/feed/b7fd5266d0160924cbe5a630c4a608fde7cd3404.jpeg" alt="img" draggable="false">
            <img src="https://lmg.jj20.com/up/allimg/811/013015115633/150130115633-13-1200.jpg" alt="img" draggable="false">
            <img src="https://img1.baidu.com/it/u=3651966868,3530163192&fm=253&fmt=auto&app=138&f=JPEG" alt="img" draggable="false">
            <img src="https://img.zcool.cn/community/018dbb5c769407a801213f26cf080b.jpg@3000w_1l_2o_100sh.jpg" alt="img" draggable="false">
            <img src="https://img.zcool.cn/community/018dbb5c769407a801213f26cf080b.jpg@3000w_1l_2o_100sh.jpg" alt="img" draggable="false">
            <img src="https://img0.baidu.com/it/u=3299375624,640545767&fm=253&fmt=auto&app=138&f=JPEG" alt="img" draggable="false">
            <img src="https://img.zcool.cn/community/018dbb5c769407a801213f26cf080b.jpg@3000w_1l_2o_100sh.jpg" alt="img" draggable="false">
            <img src="https://netdisk.moyublog.com/free_wallpapers_files/bazr2n55k3t.jpg" alt="img" draggable="false">
            <img src="https://img.china.alibaba.com/img/ibank/2015/740/803/2379308047_603932725.jpg" alt="img" draggable="false">
            <img src="https://netdisk.moyublog.com/free_wallpapers_files/yljehh212re.jpg" alt="img" draggable="false">
            <img src="https://img.zcool.cn/community/018dbb5c769407a801213f26cf080b.jpg@3000w_1l_2o_100sh.jpg" alt="img" draggable="false">
            <img src="https://lmg.jj20.com/up/allimg/811/013015115633/150130115633-9-1200.jpg" alt="img" draggable="false">
            <img src="https://lmg.jj20.com/up/allimg/811/013015115633/150130115633-10-1200.jpg" alt="img" draggable="false">
        </div>
        <i id="right" class="fa-solid fa-angle-right"></i>
    </div>
</body>
</html>
<script>
    let carousel = document.querySelector('.carousel');
    let Oicon = document.querySelectorAll('.wrapper i')
    firstImg = carousel.querySelectorAll('img')[0]
    let isDrageStart = false,isDragging=false, prevPageX, prevScrollLeft,positionDiff;
    const dragStart = (e) => {
        isDrageStart = true;
        prevPageX = e.pageX || e.touches[0].pageX;
        prevScrollLeft = carousel.scrollLeft
    }
    const dragging = (e)=> {
        if (!isDrageStart) return
        e.preventDefault()
        isDragging = true;
        carousel.classList.add('dragging')
        positionDiff = (e.pageX ||  e.touches[0].pageX) - prevPageX;
        carousel.scrollLeft = prevScrollLeft - positionDiff
        showIcon();
    }
    const dragStop = () => {
        isDrageStart = false;
        carousel.classList.remove('dragging')
        if(!isDragging) return
        isDragging = false
        autoSlide();
    }

    Oicon.forEach(element => {
        element.addEventListener('click', ()=> {
            let firstImageWidth = firstImg.clientWidth + 10  //加10因为图片的margin-left为10
            carousel.scrollLeft += element.id == 'left' ? -firstImageWidth : firstImageWidth
            setTimeout(()=> showIcon(), 60)
        })
    });
    // 左右箭头的icon显示隐藏
    const showIcon = () => {
        let scrollWidth = carousel.scrollWidth - carousel.clientWidth
        Oicon[0].style.display = carousel.scrollLeft == 0 ? 'none': 'block'
        Oicon[1].style.display = carousel.scrollLeft == scrollWidth ? 'none': 'block'
    }

    const autoSlide = () => {
        if(carousel.scrollLeft == (carousel.scrollWidth - carousel.clientWidth)) return
        positionDiff = Math.abs(positionDiff)
        let firstImgWidth = firstImg.clientWidth + 10 
        let valDifference = firstImgWidth - positionDiff
        if (carousel.scrollLeft > prevScrollLeft) {
            return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
        }
        carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    }
    carousel.addEventListener('mousemove', dragging)  //当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
    carousel.addEventListener('touchmove', dragging) //当用户在屏幕上移动手指时会发生 touchmove 事件

    carousel.addEventListener('mousedown', dragStart) //当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件
    carousel.addEventListener('touchstart', dragStart) //当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发

    carousel.addEventListener('mouseup', dragStop) //当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件
    carousel.addEventListener('mouseleave', dragStop) //当鼠标指针离开被选元素时，会发生 mouseleave 事件
    carousel.addEventListener('touchend', dragStop) //当手指从屏幕上离开的时候触发
</script>