利用 transition 简单实现轮播图

丢丢的大神

于 2021-08-07 11:31:31 发布

阅读量704

点赞数

分类专栏： css3 文章标签： web

本文链接：https://blog.csdn.net/qq_34159635/article/details/119481662

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

轮播图现在应用很广泛。一般的项目大家都用 swiper 这个插件来实现，swiper插件非常强大，它提供了很多应用场景，大家有兴趣可以去看看。
如果在实际中写个小demo，可能不会去引用复杂的插件，比如写一个小的活动页，直接用原生的来实现就可以了，请看下面代码：

<html>
   <head>
       <title>轮播图</title>
       <style>
            body {
              margin: 0;
              padding: 0;
            }

            .swiper-box {
              position: relative;
              width: 640px;
              margin: 0 auto;
              height: 480px;
              overflow: hidden;
            }


            .swiper-box img {
              position: absolute;
              transition-property: left;
              transition-duration: 1s;
              transition-timing-function: linear;
              left: 640px;
            }

            .swiper-box img.active {
              left: 0;
            }

       </style> 
    
    </head> 
    <body>
      <div class="swiper-box">
         <img class="img1 active" src="http://lorempixel.com/output/nature-q-c-640-480-5.jpg" />
         <img class="img2" src="http://lorempixel.com/output/city-q-c-640-480-10.jpg" />
         <img class="img3" src="http://lorempixel.com/output/food-q-c-640-480-4.jpg" />
      </div>
 

    </body>
    <script>
         var imgs = document.querySelectorAll('img');
         loop(0);

         // 轮播函数
         function loop(index, pre) {
           var timer = null;
           if (pre != null) {
              
             }
           if (timer) {
              clearTimeout(timer);
           }

           timer = setTimeout(()=> {
              // 记录离开显示区图片的index
              var _index  = index;
              // 让当前显示的图片离开显示区
              imgs[index].style.left = '-640px';
              // 判断是否是最后一张图片, 如果是最后一张，则后面一张是第一张
              index = index === imgs.length - 1 ? -1 : index;
              // 这里让后面一张图片进入显示去
              imgs[index + 1].style.left = '0';
              index++;
             
             // 等待当前轮播结束
              setTimeout(()=> {
                // 将离开显示区的图片位置重新放置在右侧等待下一轮进入
                imgs[_index].style.transitionDuration = '0s'; 
                imgs[_index].style.left = '640px';
                imgs[pre].style.transitionDuration = '1s';
                
              }, 1000);

              // 轮播
              loop(index, _index);

           }, 3000)
         }

    </script>

</html>

丢丢的大神

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用 transition 简单实现轮播图

轮播图现在应用很广泛。一般的项目大家都用 swiper 这个插件来实现，swiper插件非常强大，它提供了很多应用场景，大家有兴趣可以去看看。如果在实际中写个小demo，可能不会去引用这么负责的插件，比如写一个小的活动页，直接用原生的来实现就可以了，请看下面代码：<html> <head> <title>轮播图</title> <style> body { m
复制链接

扫一扫