简单的jquery轮播

最新推荐文章于 2024-08-27 19:30:26 发布

吴猪婆

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量68

点赞数

分类专栏： jq 文章标签： jq 自动轮播

本文链接：https://blog.csdn.net/qq_40668606/article/details/84112203

版权

jq 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css部分

 * {
      margin: 0;
      padding: 0;
    }
    #wrap {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 50px auto;
    }

    .list {
      list-style: none;
      text-align: center;
      width: 200px;
      height: 200px;
    }

    li {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background: #eee;
    }
    .next,
    .prev {
      position: absolute;
      top: 90px;
      width: 36px;
      height: 24px;
      border: 1px solid red;
    }
    .prev {
      right: 0;
    }
    li {
      display: none;
    }
    .on {
      display: block;
    }
  </style>

内容部分

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>

<body>
  <div id="wrap">
    <ul class="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
    <div class="next">next</div>
    <div class="prev">prev</div>
  </div>
</body>

</html>

jq部分

<script>
  $(function () {
    let li = $('.list li')
    let prev = $('.prev')
    let next = $('.next')
    let on = $('li .on')
    let i = 0
    let timer = null
    let len = li.length - 1
    prev.click(function () {


      li.eq(i).removeClass('on')
      i++
      if (i > len) {
        i = 0
      }
      li.eq(i).addClass('on')


    });
    next.click(function () {

      li.eq(i).removeClass('on')
      i--
      if (i < 0) {
        i = len
      }
      li.eq(i).addClass('on')
    });

    auto()

    $('#wrap').hover(() => {
      clearInterval(timer)
    }, auto)

    function auto() {
      clearInterval(timer)
      timer = setInterval(function () {
        prev.trigger("click")
      }, 1000)
    }
  })
</script>