提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【JavaScript】JS通过定时器实现轮播图效果和停顿1秒延迟执行效果

JavaScriptJS执行 实现 通过 效果 定时器 延迟
2023-09-11 14:15:11 时间 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style>
    .logo {
      width: 300px;
      height: 300px;
      background-color: #999999;
      border: 5px rgb(204, 201, 201) solid;
      overflow: hidden;
    }
    .logo img {
      width: 100%;
      height: 100%;
    }
    button {
      width: 150px;
      height: 60px;
      font-size: 25px;
      margin-right: 20px;
    }
  </style>
 
  <body>
    <div class="logo">
      <img src="images/logo.jpg" />
    </div>
    <br /><br />
    <button id="stop">停止定时器</button>
 
    <button id="btn_2">下一张</button>
  </body>
 
  <script type="text/javascript">
        var img = document.getElementsByTagName("img")[0];
 
        var img_now=0;
        var imgs=["tb1.jpg","tb2.jpg","tb3.jpg","tb4.jpg","tb5.jpg"];
 
        var stop = document.getElementById("stop");
        stop.onclick = function () {
          
            clearInterval(lunbo);

        };
 
        var btn_2 = document.getElementById("btn_2");
        btn_2.onclick = function () 
        {
          img_now=img_now+1;
          if(img_now==5){img_now=0};
          img.src="images/"+imgs[img_now];
        }
        /* 每一秒切换一张图片 */
        var lunbo=setInterval(btn_2.onclick,1000);
  </script>
</html>

二、通过swiper插件实现轮播图效果

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <link rel="stylesheet" href="css/body.css" />
  <link rel="stylesheet" href="./js/swiper/swiper-bundle.min.css" />

  <style>
    /* html,
    body {
      position: relative;
      height: 100%;
    } */

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    .banner{height:250px;}

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
  <body>
    <div class="banner">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </body>

  <!-- Swiper JS -->
  <script src="js/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script type="text/javascript">
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>
</html>

相关文章