一个简单的网站头部，四个图片幻灯片轮播的 JavaScript 代码

wangluo • • 教程技巧 • 118 阅读

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Header Slideshow</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    header {
      position: relative;
      height: 400px;
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .active-slide {
      z-index: 1; /* 设置当前显示图片的 z-index 值 */
    }
    
    .slide-nav {
        position: absolute; /* 导航按钮的定位方式为绝对定位 */
        bottom: 20px; /* 将导航按钮设置到 header 底部中心位置 */
        left:50%;
        transform:translateX(-50%);/* 左右居中 */
        display:flex; /* 将导航按钮容器设置为弹性盒子，用于方便调整子元素布局 */
        justify-content:center; /* 水平居中*/
        align-items:center;/* 垂直居中*/
        gap:.5em;/* 设置导航按钮之间的间隔距离 */
    }
    
    .slide-nav button{
       border:none; /* 取消边框样式 */
       background-color:#fff; /* 添加背景色 */
       width:.5em; /* 设置宽度和高度为等值以便保持正方形 */
       height:.5em;
       border-radius:50%; /* 将按钮变成圆形 */
       cursor:pointer; /* 添加手型光标样式 */
    }
    
    .slide-nav button.active {
        background-color:#333; /* 设置当前导航按钮的背景色为灰黑色 */
    }

  </style>
</head>

<body>
  <header>
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
      <!-- slide-nav 按钮容器 -->
      <nav class="slide-nav">
        <!-- 每个导航按钮以 button 元素表示 -->
            <button></button>
            <button></button>
            <button></button>
            <button></button>
      </nav>
  </header>

  <script src="slideshow.js"></script>
</body>

</html>

JS:

// 获取幻灯片和导航按钮元素
var slides = document.querySelectorAll('header img');
var navButtons = document.querySelectorAll('.slide-nav button');

// 定义活动幻灯片和当前导航按钮的索引
var activeSlide = 0;
var activeButton = 0;

// 自动轮播功能
setInterval(function() {
   // 将当前活动幻灯片和导航按钮移除 active-slide 和 active 类名
   slides[activeSlide].classList.remove('active-slide');
   navButtons[activeButton].classList.remove('active');
   
   // 计算下一个活动幻灯片和导航按钮的索引值
   activeSlide++;
   if(activeSlide === slides.length) {
       activeSlide = 0;
   }
   activeButton++;
   if(activeButton === navButtons.length) {
       activeButton = 0;
   }

   // 将下一个活动幻灯片和导航按钮添加 active-slide 和 active 类名
   slides[activeSlide].classList.add('active-slide');
   navButtons[activeButton].classList.add('active');

}, 5000); // 设置自动轮播的时间间隔为 5 秒


// 手动切换幻灯片功能
navButtons.forEach(function(button, index) {
    button.addEventListener('click', function() {
        
        // 将当前活动幻灯片和导航按钮移除 active-slide 和 active 类名
        slides[activeSlide].classList.remove('active-slide');
        navButtons[activeButton].classList.remove('active');

        // 切换到用户点击的幻灯片和导航按钮，并更新索引值
        activeSlide = index;
        activeButton = index;

        // 将新的活动幻灯片和导航按钮添加 active-slide 和 active 类名
        slides[activeSlide].classList.add('active-slide');
        navButtons[activeButton].classList.add('active');
    });
});

 

这个代码使用了 setInterval 函数来实现自动轮播功能，同时使用了 forEach 函数来绑定每个导航按钮的点击事件并实现手动切换功能。在 HTML 中还使用了一个 slide-nav 容器，用于包含所有的导航按钮，并且利用 flexbox 布局实现水平居中效果。

版权声明：
作者：wangluo
链接：http://codeftp.com/?p=191
来源：源码分享网
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>