[分享]css中怎样使图片左右滑动

发布于 2024-11-11 19:05:06
CSS中如何实现图片左右滑动？下面为大家介绍具体实现方法：
 <html>
      <head>
         <style>
            .slider{
               display: flex;
               overflow: hidden;
               width: 100%;
            }
            .slider__wrapper{
               display: flex;
               align-items: center;
               transition: transform 0.3s ease-out;
            }
            .slider__item{
               width: 100%;
            }
            .slider__item img{
               width: 100%;
            }
            .slider__button{
               display: flex;
               justify-content: space-between;
               position: absolute;
               top: 50%;
               width: 100%;
               z-index: 10;
            }
            .slider__button button{
               background-color: transparent;
               border: none;
               font-size: 1.7em;
               color: #fff;
               cursor: pointer;
            }
            .slider__button button:focus{
               outline: none;
            }
            .slider__button button:first-of-type{
               margin-right: auto;
            }
            .slider__button button:last-of-type{
               margin-left: auto;
            }
         </style>
      </head>
      <body>
         <div class="slider">
            <div class="slider__wrapper">
               <div class="slider__item">
                  <img src="image1.jpg">
               </div>
               <div class="slider__item">
                  <img src="image2.jpg">
               </div>
               <div class="slider__item">
                  <img src="image3.jpg">
               </div>
            </div>
            <div class="slider__button">
               <button onclick="scroll(-1)"><i class="fas fa-chevron-left"></i></button>
               <button onclick="scroll(1)"><i class="fas fa-chevron-right"></i></button>
            </div>
         </div>
         <script>
            const sliderWrapper = document.querySelector('.slider__wrapper');
            const sliderItems = document.querySelectorAll('.slider__item');
            const totalItems = sliderItems.length;
            let scrollIndex = 0;
            let translateValue = 0;
            let interval = 5000;
            const animationDuration = 1000;
            const timer = setInterval(autoScroll, interval);
            function autoScroll(){
               if(scrollIndex >= totalItems - 1){
                  scrollIndex = 0;
                  translateValue = 0;
               }else{
                  scrollIndex += 1;
                  translateValue -= sliderWrapper.clientWidth;
               }
               sliderWrapper.style.transform = `translateX(${translateValue}px)`;
               sliderWrapper.style.transition = `transform ${animationDuration}ms ease-out`;
            }
            function scroll(direction){
               clearInterval(timer);
               if(direction === -1 && scrollIndex !== 0){
                  slide(false);
               }else if(direction === 1 && scrollIndex !== totalItems - 1){
                  slide(true);
               }
               setTimeout(() => {
                  timer = setInterval(autoScroll, interval);
               }, animationDuration);
            }
            function slide(next){
               if(next){
                  scrollIndex += 1;
                  translateValue -= sliderWrapper.clientWidth;
               }else{
                  scrollIndex -= 1;
                  translateValue += sliderWrapper.clientWidth;
               }
               sliderWrapper.style.transform = `translateX(${translateValue}px)`;
               sliderWrapper.style.transition = `transform ${animationDuration}ms ease-out`;
            }
         </script>
      </body>
   </html>
以上是CSS图片左右滑动的实现方式，具体代码可供大家参考。
css 教程
一个月内的热帖推荐
[分享]css中怎样使图片左右滑动

91云脑
