css+js实现轮播banner

最新推荐文章于 2022-12-30 19:20:09 发布

withwz_

最新推荐文章于 2022-12-30 19:20:09 发布

阅读量386

点赞数

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_42519137/article/details/104503401

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

基本功能

轮回播放
自定义过渡时间、间隔时间
上一张、下一张

完整代码

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .container {
      width: 126px;
      height: 86px;
      overflow: hidden;
      margin: 100px auto;
      background-color: aquamarine;
    }

    .swiper {
      list-style: none;
      display: flex;
      /* transition: all 400ms ease-in-out; */
    }

    .swiper:hover {
      animation-play-state: paused;
    }

    .item {
      flex-basis: 126px;
      flex-shrink: 0;
      width: 126px;
      height: 86px;
      background: rgba(11, 22, 11, .4);
      box-sizing: border-box;
      border: 2px solid red;
    }

    .img {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }


    .control {
      display: flex;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <ul class="swiper">
      <li class="item">
        <!-- 1 -->
        <img class="img" src="images/1.jpg" alt="" />
      </li>
      <li class="item">
        <!-- 2 -->
        <img class="img" src="images/2.jpg" alt="" />
      </li>
      <li class="item">
        <!-- 3 -->
        <img class="img" src="images/3.jpg" alt="" />
      </li>
      <li class="item">
        <!-- 4 -->
        <img class="img" src="images/4.jpg" alt="" />
      </li>
      <li class="item">
        <!-- 5 -->
        <img class="img" src="images/5.jpg" alt="" />
      </li>
      <li class="item">
        <!-- 6 -->
        <img class="img" src="images/6.jpg" alt="" />
      </li>
      <li class="item">
        <!-- 7 -->
        <img class="img" src="images/7.jpg" alt="" />
      </li>
    </ul>
  </div>
  <div class="control">
    <div>
      轮播间隔：
      <input id="input1" type="text" value="800">
      <br />
      过渡时间：
      <input id="input2" type="text" value="400">
      <br />
      <button id="btn">重置轮播</button>
      <br />
      <button id="pre">上一张</button>
      <button id="next">下一张</button>
    </div>
  </div>

  <script>
    window.onload = function () {
      const swiper = document.querySelectorAll('.swiper')[0]
      const count = document.querySelectorAll('.item').length
      let timer
      let mark = -1
      let i = 0

      const getI = (i) => {
        if (i < 1 || (i < count - 1 && i > mark)) {
          mark = i
          return ++i
        } else {
          --i
          mark = i
          return i
        }
      }

      const refrence = () => {
        clearInterval(timer)
        const interval = document.querySelector('#input1').value
        const duration = document.querySelector('#input2').value
        console.log(interval, duration)
        swiper.style.transition = `all ${duration}ms ease-in-out`
        timer = setInterval(() => {
          i = getI(i)
          swiper.style.transform = `translate(${-126 * i}px)`
        }, interval)
      }

      refrence()

      document.querySelector('#btn').onclick = refrence

      document.querySelector('#pre').onclick = () => {
        i = getI(i)
        swiper.style.transform = `translate(${-126 * i}px)`
      }

      document.querySelector('#next').onclick = () => {
        i = getI(i)
        swiper.style.transform = `translate(${-126 * i}px)`
      }

    }

  </script>
</body>

</html>

样图

依赖

无

优化

上一张、下一张有问题

完整代码

https://github.com/withwz/swiper

withwz_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css+js实现轮播banner

基本功能轮回播放自定义过渡时间、间隔时间上一张、下一张完整代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0...
复制链接

扫一扫