轮播图

页面结构

　　整个轮播图是由一个 div 包裹，左右箭头是两个 a 标签，左右箭头默认隐藏。图片部分由 ul 包裹，每张图片都由一个 li 包裹。小圆点部分是由 ol 包裹，里面的 li 根据有多少张图片动态生成。

鼠标滑入显示左右箭头和滑出隐藏左右箭头

　　首先获取到轮播图的大盒子，然后再获取左右箭头。给大盒子分别添加鼠标滑入( mouseover )和鼠标滑出( mouseout )事件。在滑入里让左右箭头显示，在滑出里让左右箭头隐藏。

动态生成小圆点

　　由于小圆点是根据图片的个数动态生成的，所以要根据图片的个数自动生成。首先要获取图片的个数，可以通过 document.querySelector('.类名') 的方式获取，也可以通过其它方式获取。然后通过 for 循环，循环获取到的图片，然后每循环一次创建一个 li，最后追加( appendChild(' li ') )到 ol 里。

　　创建 li 的同时为它添加点击事件。点击事件里要完成两件事，第一件事是让当前点击的 li 的背景色变成白色，其它的变成透明。这里就用到了排他思想，先通过循环清除其他 li 的样式，然后让当前点击的 li 的背景色变成白色。

　　第二件事就是切换对应的图片，这里需要用到一个封装好的动画的方法，用的时候需要提前引入。参数是需要把要移动的元素和移动距离传进去。需要移动的元素就是图片所在的 ul，让 ul 整体移动；移动距离就是当前的索引 * 图片的宽度。

左右按钮的功能

　　这里需要在外面声明一个变量 num，这个变量的作用是当做图片的索引。在右箭头的点击事件里先让 num--，然后再加一个 if 判断。判断 num 是否为最后一张，如果是最后一张就让 num 重新等于 0。然后再调用动画方法，把 ul 和 -num * 图片的宽度给传进去。因为移动的是负值时才显示的下一张图片，所以 num 前面要加 -，上面小圆点那里也是需要加一个 -(减号)。最后再清除其他小圆点的样式，让当前点击的小圆点的背景色变成白色。左箭头和右箭头的代码基本一致，只有一些的不同。

　　在左箭头的点击事件里 num 是递减( --num )，因为它切换的是上一张图片，而不是下一张。if 判断的则是判断 num 是否小于 0，如果小于 0 就让 num 等于图片的长度 - 1，这里需要减一，如果不减一那么再第一张图的时候点击左箭头那么就会切换到一个空白，再点击一次左箭头才会是最后一张图。

　　到这一步还会有个 bug，点击小圆圈之后再点左右箭头时会出现图片不对或小圆圈不对的情况。解决方法是：在为小圆点添加点击事件时把索引的值传给 num。

自动播放

　　自动播放用到的就是循环定时器( setInterval )。声明的时候需要用到一个变量来接收，因为鼠标滑入轮播图的时候要取消轮播图。自动播放的效果和右箭头的效果一样，所以在定时器里可以调用右箭头的方法( 右箭头.click() )。在鼠标滑入让左右箭头显示的那个事件里清除这个定时器，然后让定时器的那个变量等于 null。最后在鼠标滑出事件里让那个变量重新等于 setInterval 定时器。

代码

页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 821px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
      text-decoration: none;
    }

    .focus {
      margin: 0 auto;
      position: relative;
      width: 821px;
      height: 455px;
      overflow: hidden;
    }

    .focus ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 600%;
    }

    .focus ul li {
      float: left;
    }

    .arrow-l,
    .arrow-r {
      display: none;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      width: 24px;
      height: 40px;
      background: rgba(0, 0, 0, .3);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-family: 'icomoon';
      font-size: 18px;
      z-index: 2;
      transition: all .5s;
    }

    .arrow-r {
      right: 0;
    }

    .circle {
      position: absolute;
      bottom: 10px;
      left: 50px;
    }

    .circle li {
      float: left;
      width: 8px;
      height: 8px;
      /*background-color: #fff;*/
      border: 2px solid rgba(255, 255, 255, 0.5);
      margin: 0 3px;
      border-radius: 50%;
      /*鼠标经过显示小手*/
      cursor: pointer;
    }

    .current {
      background-color: #fff;
    }
  </style>
</head>

<body>
  <div class="focus fl">
    <!-- 左侧 -->
    <a class="arrow-l arrows" href="#">
      &lt;
    </a>
    <!-- 右侧 -->
    <a class="arrow-r arrows" href="#">
      &gt;
    </a>
    <ul>
      <li>
        <a href="#"><img src="./img/bg.png" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="./img/image.jpg" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="./img/previewFix.jpg" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="./img/previewFix2.jpg" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="./img/2.jpg" alt=""></a>
      </li>
    </ul>
    <ol class="circle">
      <!-- <li></li>
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li> -->
    </ol>
  </div>
</body>
<script src="./js/animale.js"></script>
<script src="./js/index.js"></script>

</html>

animate.js

function animate(obj, target, callback) {
  // 先清除原先的定时器然后再定义定时器
  clearInterval(obj.time)
  // 给不同元素指定不同定时器
  obj.time = setInterval(() => {
    // 步长值要写到定时器里
    // let step = Math.ceil((target - obj.offsetLeft) / 10)
    let step = (target - obj.offsetLeft) / 10
    step = step > 0 ? Math.ceil(step) : Math.floor(step)
    if (obj.offsetLeft == target) {
      clearInterval(obj.time)
      if (callback) {
        callback()
      }
    }
    // 把每次加1的步长值改为慢慢减小的值
    // obj.style.left = obj.offsetLeft + 1 + 'px'
    obj.style.left = obj.offsetLeft + step + 'px'
  }, 15)
}

index.js

// 获取轮播图的大盒子
let focus = document.querySelector('.focus')
// 获得左右按钮
let arrow_r = document.querySelector('.arrow-r')
let arrow_l = document.querySelector('.arrow-l')
// 获取图片数量
let img = focus.querySelector('ul').querySelectorAll('li')
// 获取ol
let ol = focus.querySelector('ol')
// 获取ul
let ul = focus.querySelector('ul')
// 当前的图片
let num = 0
// 小圆点对应的索引
// let cur = 0

// 鼠标滑到大盒子上让左右按钮显示
focus.addEventListener('mouseover', () => {
  // 让左右按钮显示
  arrow_r.style.display = 'block'
  arrow_l.style.display = 'block'
  // 清除定时器
  clearInterval(time)
  time = null
})
// 离开隐藏
focus.addEventListener('mouseout', () => {
  // 让左右按钮隐藏
  arrow_r.style.display = 'none'
  arrow_l.style.display = 'none'
  // 重新创建定时器
  time = setInterval(() => {
    // 手动调用向右的方法
    arrow_r.click()
  }, 2000)
})

// 动态生成小圆点
for (let i = 0; i < img.length; i++) {
  // 创建小圆点的元素
  let li = document.createElement('li')
  // 追加
  ol.appendChild(li)
  // 为这些圆点添加点击事件
  li.addEventListener('click', () => {
    // 清除其他li的样式
    for (let k = 0; k < ol.children.length; k++) {
      ol.children[k].className = ''
    }
    // 让当前li的背景色为白色
    ol.children[i].className = 'current'
    // 显示对应的图片
    animate(ul, -i * focus.offsetWidth)
    // 把当前的索引传给num和cur
    num = i
  })
}
// 让第一个小圆点的背景色变成白色
ol.children[0].className = 'current'

// 右按钮的功能
arrow_r.addEventListener('click', () => {
  // 显示对应的图片
  num++
  // 如果等于最后一张那就重新等于0
  if (num == ul.children.length) {
    num = 0
  }
  // 显示对应的图片
  animate(ul, -num * focus.offsetWidth)
  // 让其他的ol没有背景色
  for (let i = 0; i < ol.children.length; i++) {
    ol.children[i].className = ''
  }
  // 为当前点击的li添加背景色
  ol.children[num].className = 'current'
})

// 左按钮的功能
arrow_l.addEventListener('click', () => {
  num--
  // 如果小于0那就显示最后一张
  if (num < 0) {
    num = ul.children.length - 1
  }
  // 显示对应图片
  animate(ul, -num * focus.offsetWidth)
  // 让对应的li显示白色背景
  for (let i = 0; i < ol.children.length; i++) {
    ol.children[i].className = ''
  }
  // 当前的li显示白色
  ol.children[num].className = 'current'
})

// 自动播放
let time = setInterval(() => {
  // 手动调用向右的方法
  arrow_r.click()
}, 2000)

posted @ 2022-04-14 22:07 守鹤阅读(435) 评论(0) 收藏举报

刷新页面返回顶部

0529qhy

轮播图