当前位置：网站首页>Web APIs DOM- 网页特效篇综合案例

Web APIs DOM- 网页特效篇综合案例

2022-07-29 17:23:00 【黑马程序员官方】

前期更新笔记内容： Web API 基本认知 / 获取DOM元素 / 设置/修改DOM元素内容和元素属性 / 定时器-间歇函数 / 事件基础 / 高阶函数 / 环境对象 / 综合案例-Tab栏切换 / DOM节点 /DOM 时间对象/DOM 重绘和回流/ DOM- 事件对象/DOM- 事件流 / DOM- 事件委托 +综合案例 /Web APIs DOM- 网页特效篇-滚动事件和加载事件 /元素大小和位置

综合案例轮播图案例

需求①：小图标鼠标经过事件

鼠标经过小图片，当前高亮，其余兄弟变淡添加类

需求② ：大图片跟随变化

对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入
淡出的效果，还是添加类

需求③：右侧按钮播放效果

点击右侧按钮，可以自动播放下一张图片
需要一个变化量 index 不断自增
然后播放下一张图片
如果到了最后一张，必须要还原为第1张图片
教你一招：索引号 = 索引号 % 数组长度（放到播放前面）

需求④：解决一个BUG

点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
解决方案：让变化量（索引号）重新赋值为当前鼠标经过的索引号

需求⑤：左侧按钮播放效果

点击左侧按钮，可以自动播放上一张图片
需要一个变化量 index 不断自减
然后播放上一张图片
如果到了第一张，必须要从最后一张播放
教你一招：索引号 = (数组长度 + 索引号) % 数组长度

需求⑥：

因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common

需求⑦：开启定时器

其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， right.click()

需求⑧：

鼠标经过停止定时器（清除定时器）
鼠标离开开启定时器（开启定时器）

素材：

案例代码：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐轮播图</title>
  <style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } .main { width: 700px; margin: auto; background: #000; } .slides { height: 320px; position: relative; } .slides ul li { /* display: none; */ position: absolute; top: 0; left: 0; opacity: 0; /* 这里实现淡入淡出的关键 */ transition: all .3s; } .slides li.active { /* display: block; */ opacity: 1; } .slides .extra { width: 700px; height: 53px; line-height: 53px; position: absolute; bottom: 0px; background-color: rgba(0, 0, 0, 0.8); z-index: 10; } .slides .extra h3 { width: 82%; margin: 0; margin-right: 20px; padding-left: 20px; color: #98E404; font-size: 28px; float: left; font-weight: 500; font-family: "Microsoft Yahei", Tahoma, Geneva; } .slides .extra a { width: 30px; height: 29px; display: block; float: left; margin-top: 12px; margin-right: 3px; background-image: url(./assets/icon_focus_switch.png); } .slides .extra .prev { background-position: 0 0; } .slides .extra .prev:hover { background-position: -30px 0; } .slides .extra .next { background-position: -60px 0; } .slides .extra .next:hover { background-position: -90px 0; } .indicator { padding: 10px 0; } .indicator ul { list-style-type: none; margin: 0 0 0 4px; padding: 0; overflow: hidden; } .indicator ul li { position: relative; float: left; width: 60px; margin: 0 4px 0 5px; text-align: center; cursor: pointer; } .indicator li img { display: block; border: 0; text-align: center; width: 60px; } .indicator li .mask { width: 60px; height: 60px; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); } .indicator li .border { display: none; width: 54px; position: absolute; bottom: 0; left: 0; z-index: 20; border: 3px solid #98E404; } /* li里面的mask 和 border 刚开始都是显示的 */ /* 我们写一个样式css */ .indicator .active .mask { display: none; } .indicator .active .border { display: block; } </style>
</head>

<body>
  <div class="main">
    <div class="slides">
      <ul>
        <li class="active"><a href="#"><img src="./assets/b_01.jpg" alt="第1张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_02.jpg" alt="第2张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_03.jpg" alt="第3张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_04.jpg" alt="第4张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_05.jpg" alt="第5张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_06.jpg" alt="第6张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_07.jpg" alt="第7张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_08.jpg" alt="第8张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_09.jpg" alt="第9张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_10.jpg" alt="第9张图的描述信息"></a></li>
      </ul>

      <div class="extra">
        <h3>第1张图的描述信息</h3>
        <a class="prev" href="javascript:;"></a>
        <a class="next" href="javascript:;"></a>
      </div>
    </div>
    <div class="indicator">
      <ul>
        <li class="active">
          <img src="assets/s_01.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_02.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_03.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_04.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_05.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_06.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_07.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_08.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_09.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_10.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>