JavaScript 轮播图实例 - 仿php中文网首页轮播图

仿php中文网首页轮播图

页面效果

HTML 部分

<div class="slideshow">
  <!-- 1. 图片组 -->
  <div class="images"></div>
  <!-- 2. 按钮组 -->
  <div class="bottoms"></div>
</div>
<script type="module">
  // 获取图片组的入口
  const images = document.querySelector('.images')
  // 获取按钮组的入口
  const bottoms = document.querySelector('.bottoms')
  // 导入轮播图模块: slideshow.js
  import slide from './slide.js'
  window.onload = function () {
    // 1. 创建图片组
    slide.createImages(images)
    // 2. 创建按钮组
    slide.createBottoms(images, bottoms)
    // 3. 创建按钮事件: 实现图片的切换
    ;[...bottoms.children].forEach(function (btn) {
      btn.onclick = function () {
        slide.switchImage(this, images)
      }
    })
    // 4. 定时轮播器: 间歇式的定时器
    // 间歇式定时器,第2秒换一张图片
    setInterval(
      function (bottomsArr, bottomKeys) {
        slide.timePlay(bottomsArr, bottomKeys)
      },
      2000,
      [...bottoms.children],
      Object.keys([...bottoms.children])
    )
  }
</script>

JavaScript 部分

1, 数据模块

/**
 * @desc 轮播图的数据模块
 * @param {number} key - 图片ID
 * @param {string} src - 图片path
 * @param {string} url - 点击后跳转url
 */
// 默认导出(匿名导出)它的标识符由调用者自定义
export default [
  {
    key: 1,
    src: 'https://img.php.cn/upload/aroundimg/000/000/068/63da26d3406b8838.png',
    url: 'https://www.php.cn',
  },
  {
    key: 2,
    src: 'https://img.php.cn/upload/aroundimg/000/000/001/63997a4d5d9fd596.png',
    url: 'https://www.php.cn',
  },
  {
    key: 3,
    src: 'https://img.php.cn/upload/aroundimg/000/000/001/64194356c0829952.png',
    url: 'https://www.php.cn',
  },
]

2，轮播功能模块

// 导入图片组的数据(图片信息)
import imgArr from './data.js'
/**
 * @desc 创建图片组
 * @param {Element} images - 图片容器
 */
function createImages(images) {
  // 使用文档片断来优化,将图片的生成与挂载放在内存中完成,以减少页面渲染和抖动
  // 创建文档片断对象
  const frag = new DocumentFragment()
  for (let i = 0; i < imgArr.length; i++) {
    // 1. 创建图片元素<img>
    const img = document.createElement('img')
    // 2. 为图片添加 src, data-key
    img.src = imgArr[i].src
    img.dataset.key = imgArr[i].key
    // 3. 默认显示第一张: class='active'
    if (i === 0) img.classList.add('active')
    // 4. 为<img>添加click事件,跳转地址
    img.onclick = () => (location.hre = imgArr[i].url)
    // 5. 将<img>添加文档片断中
    frag.append(img)
  }
  //   将<img>添加到:图片容器中
  images.append(frag)
}
/**
 * @desc 创建按钮组
 * @param {Element} images - 图片容器
 * @param {Element} bottoms - 按钮容器
 */
function createBottoms(images, bottoms) {
  // 1.  获取到图片的数量
  const length = images.childElementCount
  // 2. 根据图片的数量生成对应的按钮
  for (let i = 0; i < length; i++) {
    const span = document.createElement('span')
    // 添加data-key 实现与图片的data-key的联动(绑定)
    span.dataset.key = images.children[i].dataset.key
    if (i === 0) span.classList.add('active')
    bottoms.append(span)
  }
}
/**
 * @desc 创建按钮事件: 实现图片的切换
 * @param {Element} bottoms - 当前按钮
 * @param {Element} images - 图片容器
 */
function switchImage(bottoms, images) {
  // 1. 去掉所有按钮和图片的"激活"状态active
  ;[...bottoms.parentNode.children].forEach(btn => btn.classList.remove('active'))
  ;[...images.children].forEach(img => img.classList.remove('active'))
  // 2. 将当前用户正在点击的按钮设置为激活active
  bottoms.classList.add('active')
  // 3. 根据当前按钮的key,找到对应的图片
  const currImg = [...images.children].find(img => img.dataset.key === bottoms.dataset.key)
  // 4. 把这个图片设置为激活active(显示出来)
  currImg.classList.add('active')
}
/**
 * @desc 定时轮播器: 间歇式的定时器
 * @param {Element} bottomsArr - 按钮数组(用来绑定事件)
 * @param {Array} bottomKeys - 按钮的键构成的数组
 */
function timePlay(bottomsArr, bottomKeys) {
  // 定时器 + 事件派发
  // setInterval + dispatchEvent
  // 1. 从头部取一个
  let key = bottomKeys.shift()
  // 2. 根据索引,从按钮组中找到与该索引对应的按钮,给它自动派发一个点击事件
  bottomsArr[key].dispatchEvent(new Event('click'))
  // 3. 将刚才取出的按钮，再次从尾部添加到按钮数组中,实现首尾相边的效果
  bottomKeys.push(key)
}
// 默认导出
export default { createImages, createBottoms, switchImage, timePlay}