轮播图（附思路和完整源码）

最新推荐文章于 2024-05-15 10:15:46 发布

sunshine-smile_lr

最新推荐文章于 2024-05-15 10:15:46 发布

阅读量2.1k

点赞数 1

文章标签： javascript css 前端 html5

本文链接：https://blog.csdn.net/qq_46034942/article/details/123263361

版权

思路实现：（1）当鼠标移入底部导航栏，随着鼠标的移动修改大图。可以利用排他法（在多个元素中找到满足条件）实现（干掉别人，复活自己），除了大图的排他，底部导航也要发生改变，也是多选一的状态，所以这里有两个排他（2）点击下一页会发生跳转到下一页，需要注意：当图片是最后一张的时候应该跳转到第一张，同时这里也有两个排他，一个是大图的，另一个是导航栏的（3）点击上一页会跳转到上一页，需要注意：如果当前是第一张图片，点击上一页按钮应该跳转到最后一页，这里也是大图和导航的排他。为了保证点击上一页和下一页跳转时能够保证上次的位置是同一个，所以需要定义全局变量来记录下标。同时还要保证下方轮播图最后的停留的位置应该是下一次操作图片位置的开始，所以要保证i和index相等，可以将i的值赋值给index（4）自动播放利用定时器实现，如果没有操作取阻拦它，它就应该一直自动播放，所以使用永久定时器。当鼠标移入轮播图范围时停止轮播，所以在鼠标移入时添加清除定时器操作，当鼠标移出轮播范围应该恢复定时器，除了鼠标的移动事件同时应该在外面添加一个定时器，因为在没有任何操作的时候，需要自动播放。

下面是完整代码：

<!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 0.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