简单JS轮播图

最新推荐文章于 2024-09-18 14:12:23 发布

会讲英文的汤姆猫

最新推荐文章于 2024-09-18 14:12:23 发布

阅读量853

点赞数 1

分类专栏：轮播图文章标签： javascript css html5

本文链接：https://blog.csdn.net/weixin_49840493/article/details/109175886

版权

轮播图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单的轮播图效果

 <body>
    <div id="slider" class="slider">
      <ul>
        <li class="ax">
          <a href="#">
            <img src="./img/01.jpg" alt="" />
            <p>这是第1张图片的文字说明</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/02.jpg" alt="" />
            <p>这是第2张图片的文字说明</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/04.jpg" alt="" />
            <p>这是第3张图片的文字说明</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/4.jpg" alt="" />
            <p>这是第4张图片的文字说明</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/5.jpg" alt="" />
            <p>这是第5张图片的文字说明</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./img/6.jpg" alt="" />
            <p>这是第6张图片的文字说明</p>
          </a>
        </li>
      </ul>
      <!--箭头-->
      <div class="arrow">
        <span id="arrow-left" class="arrow-left">&lt;</span>
        <span id="arrow-right" class="arrow-right">&gt;</span>
      </div>
    </div>

 <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      img {
        display: block;
      }

      .slider {
        height: 470px;
        width: 590px;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
      }

      .slider li {
        position: absolute;
        /* 每个图片的li设置隐藏 */
        display: none;
      }

      .slider li:first-child {
        /* 给第一张图片设置显示 */
        display: block;
      }

      /*文字部分的样式*/

      .slider li p {
        position: absolute;
        width: 100%;
        padding: 10px 0;
        text-indent: 2em;
        background-color: rgba(0, 0, 0, 0.6);
        bottom: 0;
        left: 0;
        font-size: 18px;

        /*给文字设置位移到底部去*/
        transform: translate3d(0, 100%, 0);
        /*添加过渡*/
        transition: all 0.8s;
      }

      /*当前展示li 下的文字样式*/

      .slider li.ax p {
        /*文字位移到0的位置，正常显示*/
        transform: translate3d(0, 0, 0);
      }

      .slider li a {
        color: #fff;
      }

      .arrow {
        display: none;
      }

      .slider:hover .arrow {
        display: block;
      }

      .arrow-left,
      .arrow-right {
        font-family: 'SimSun', '宋体';
        width: 30px;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 50%;
        margin-top: -30px;
        cursor: pointer;
        text-align: center;
        line-height: 60px;
        color: #fff;
        font-weight: 700;
        font-size: 30px;
      }

      .arrow-left:hover,
      .arrow-right:hover {
        background-color: rgba(0, 0, 0, 0.5);
      }

      .arrow-left {
        left: 0;
      }

      .arrow-right {
        right: 0;
      }
    </style>

  <script>
      // 获取左右箭头的节点对象
      var spanLeft = document.getElementById('arrow-left')
      var spanRight = document.getElementById('arrow-right')
      // 获取li的节点
      var divobj = document.getElementById('slider')
      var liobj = divobj.firstElementChild.children
      // 设置定时器
      var times = ''
      // 声明两个变量分别为当前的li的索引，及后一张li的索引都为零
      var index = 0
      var prev = 0
      // 当点击左箭头时把当前图片的索引值赋给下张图片，让当前图片的索引自减
      spanLeft.onclick = function () {
        prev = index
        index--
        // 判断是否是第一张图片，如果是让它再点击后跳到最后一张图片
        if (index < 0) index = liobj.length - 1
        change()
      }
      // 右点击事件同理（左点击事件）
      spanRight.onclick = function () {
        prev = index
        index++
        if (index == liobj.length) index = 0
        change()
      }
      // 自动播放
      function outplay() {
        times = setInterval(() => {
          spanRight.onclick()
        }, 2000)
      }
      outplay()
      divobj.onmouseover = function () {
        clearInterval(times)
      }
      divobj.onmouseout = function () {
        outplay()
      }

      function change() {
        // 1、 此处主要是让当前得li添加一个ax类，让后一li删除ax类，（让下方的文字显示）
        // 2、让当前li显示图片
        liobj[index].classList.add('ax')
        liobj[index].style.display = 'block'
        liobj[index].style.opacity = 1
        liobj[prev].classList.remove('ax')
        liobj[prev].style.opacity = 0
      }
    </script>