一、效果图
二、代码
<!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) returne.preventDefault()isDragging = true;carousel.classList.add('dragging')positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;carousel.scrollLeft = prevScrollLeft - positionDiffshowIcon();}const dragStop = () => {isDrageStart = false;carousel.classList.remove('dragging')if(!isDragging) returnisDragging = falseautoSlide();}Oicon.forEach(element => {element.addEventListener('click', ()=> {let firstImageWidth = firstImg.clientWidth + 10 //加10因为图片的margin-left为10carousel.scrollLeft += element.id == 'left' ? -firstImageWidth : firstImageWidthsetTimeout(()=> showIcon(), 60)})});// 左右箭头的icon显示隐藏const showIcon = () => {let scrollWidth = carousel.scrollWidth - carousel.clientWidthOicon[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)) returnpositionDiff = Math.abs(positionDiff)let firstImgWidth = firstImg.clientWidth + 10 let valDifference = firstImgWidth - positionDiffif (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>
