devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端小案例——轮播图（HTML+CSS+JS, 附源码）_前端轮播图

作者：爱喝兽奶帝天荒 | 2024-07-08 01:05:35

赞

踩

前端轮播图

一、前言

实现功能：

  • 显示多张图片，每张图片占据轮播图容器的一部分空间。
  • 实现向左和向右的切换按钮，可以点击按钮切换到上一张或下一张图片。
  • 在底部显示小圆点，表示当前显示的图片，点击小圆点可以跳转到对应的图片。

实现逻辑：

  1. 首先，使用querySelectorAll方法获取所有的轮播项元素，并将其保存在items变量中。

  2. 定义一个全局变量current，用于记录当前显示的轮播项的索引，默认为0。通过操作current变量来控制显示的轮播项。并通过调用相关函数来更新显示和样式

  3. 定义showSlide函数，用于显示当前的轮播项。通过遍历所有轮播项，设置其transform属性来实现水平滑动效果。同时，调用updateDots函数更新小圆点的样式。

  4. 定义prevSlide函数，用于切换到上一张轮播项。如果current大于0，则将current减1；否则，将current设置为最后一张轮播项的索引。然后，调用showSlide函数显示对应的轮播项。

  5. 定义nextSlide函数，用于切换到下一张轮播项。如果current小于轮播项的数量减1，则将current加1；否则，将current设置为0。然后，调用showSlide函数显示对应的轮播项。

  6. 使用setInterval方法定义一个定时器timer，每隔3秒自动调用一次nextSlide函数，实现自动播放功能。

  7. 定义pauseTimer函数，用于暂停定时器。通过调用clearInterval方法，清除定时器timer。

  8. 定义resumeTimer函数，用于恢复定时器。重新设置定时器timer，调用nextSlide函数实现轮播功能。

  9. 添加鼠标悬停和离开事件监听器，当鼠标悬停在轮播图上时，调用pauseTimer函数暂停自动播放；当鼠标离开时，调用resumeTimer函数恢复自动播放。

  10. 使用querySelectorAll方法获取所有的小圆点元素，并将其保存在dots变量中。

  11. 定义updateDots函数，用于更新小圆点的样式。遍历所有小圆点元素，移除它们的active类名，然后根据current变量为当前轮播项对应的小圆点添加active类名。

  12. 定义jumpToSlide函数，用于跳转到指定的轮播项。将current变量设置为指定轮播项的索引，然后调用showSlide和updateDots函数，显示对应的轮播项并更新小圆点的样式。

二、项目运行效果 

三、全部代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>轮播图</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             text-decoration: none;
  12.             list-style: none;
  13.             background-repeat: no-repeat;
  14.         }
  15.         .carousel {
  16.             position: relative;
  17.             width: 100%;
  18.             overflow: hidden;
  19.         }
  20.         .carousel-inner {
  21.             display: flex;
  22.             width: 100%;
  23.             transition: transform 0.6s ease-in-out;
  24.         }
  25.         .item {
  26.             flex: 0 0 100%;
  27.             height: 55vh;
  28.         }
  29.         .item img {
  30.             width: 100%;
  31.             height: 100%;
  32.             object-fit: cover;
  33.         }
  34.         .carousel-control {
  35.             position: absolute;
  36.             top: 50%;
  37.             transform: translateY(-50%);
  38.             color: #fff;
  39.             font-size: 80px;
  40.             z-index: 10;
  41.             cursor: pointer;
  42.         }
  43.         .left {
  44.             left: 25px;
  45.         }
  46.         .right {
  47.             right: 25px;
  48.         }
  49.  
  50.         .dots {
  51.             position: absolute;
  52.             bottom: 20px;
  53.             left: 50%;
  54.             z-index: 15;
  55.             width: 60%;
  56.             padding-left: 0;
  57.             margin-left: -30%;
  58.             text-align: center;
  59.             list-style: none;
  60.         }
  61.  
  62.         .dots > li {
  63.             display: inline-block;
  64.             width: 10px;
  65.             height: 10px;
  66.             margin: 1px;
  67.             cursor: pointer;
  68.             background-color: rgba(0,0,0,0);
  69.             border: 1px solid #fff;
  70.             border-radius: 10px;
  71.         }
  72.  
  73.         .dots .active {
  74.             width: 12px;
  75.             height: 12px;
  76.             margin: 0;
  77.             background-color: #fff;
  78.         }
  79.     </style>
  80. </head>
  81.  
  82. <body>
  83.     <div class="carousel" id="carousel">
  84.         <div class="carousel-inner">
  85.             <div class="item">
  86.                 <img src="1.png" style="background-color: pink;">
  87.             </div>
  88.             <div class="item">
  89.                 <img src="2.png" style="background-color: bisque;">
  90.             </div>
  91.             <div class="item">
  92.                 <img src="3.jpg" style="background-color: rgb(144, 255, 236);">
  93.             </div>
  94.             <div class="item">
  95.                 <img src="4.jpg" style="background-color: rgb(248, 99, 124);">
  96.             </div>
  97.             <div class="item">
  98.                 <img src="5.jpg" style="background-color: rgb(210, 161, 250);">
  99.             </div>
  100.         </div>
  101.         <div class="carousel-control left" onclick="prevSlide()">&lsaquo;</div>
  102.         <div class="carousel-control right" onclick="nextSlide()">&rsaquo;</div>
  103.  
  104.         <div class="dots">
  105.             <li class="active" onclick="jumpToSlide(0)"></li>
  106.             <li onclick="jumpToSlide(1)"></li>
  107.             <li onclick="jumpToSlide(2)"></li>
  108.             <li onclick="jumpToSlide(3)"></li>
  109.             <li onclick="jumpToSlide(4)"></li>
  110.         </div>
  111.     </div>
  112. </body>
  113.     <script>
  114.         let items = document.querySelectorAll('.item');
  115.         let current = 0;
  116.         function showSlide() {
  117.             items.forEach(item => {
  118.                 item.style.transform = `translateX(-${current * 100}%)`;
  119.             });
  120.             updateDots();
  121.         }
  122.  
  123.         function prevSlide() {
  124.             if (current > 0) {
  125.                 current--;
  126.             } else {
  127.                 current = items.length - 1;
  128.             }
  129.             showSlide();
  130.         }
  131.  
  132.         function nextSlide() {
  133.             if (current < items.length - 1) {
  134.                 current++;
  135.             } else {
  136.                 current = 0;
  137.             }
  138.             showSlide();
  139.         }
  140.  
  141.         let timer = setInterval(nextSlide, 3000);
  142.  
  143.         function pauseTimer() {
  144.             clearInterval(timer);
  145.         }
  146.         function resumeTimer() {
  147.             timer = setInterval(nextSlide, 3000);
  148.         }
  149.  
  150.         document.getElementById('carousel').addEventListener('mouseover', pauseTimer);
  151.         document.getElementById('carousel').addEventListener('mouseout', resumeTimer);
  152.  
  153.         let dots = document.querySelectorAll('.dots li');
  154.  
  155.         function updateDots() {
  156.             dots.forEach(dot => {
  157.                 dot.classList.remove('active');
  158.             });
  159.             dots[current].classList.add('active');
  160.         }
  161.  
  162.         function jumpToSlide(index) {
  163.             current = index;
  164.             showSlide();
  165.             updateDots();
  166.         }
  167.     </script>
  168. </html>

四、答疑解惑

        这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和图片，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。

        还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。

博主VX：18884281851

谢谢各位的支持~~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/797228
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。