1.抽奖活动

最新推荐文章于 2024-02-22 16:53:56 发布

如果决定要走又何必挽留

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量146

点赞数

分类专栏：代码练习文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_59076775/article/details/126862054

版权

代码练习专栏收录该内容

9 篇文章

订阅专栏

这段代码实现了一个图片轮播效果，用户点击启动按钮后，图片会随机选中并突出显示，每150次轮播后停止，并扩大选定图片。代码使用了HTML、CSS和JavaScript，适用于前端开发中的交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码:

<!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>
  <style>
    i {
      display: flex;
      flex-wrap: wrap;
      width: 600px;
      height: 600px;
      background-color: beige;
      margin: 200px auto;
    }
    .option {
      width: 200px;
      height: 200px;
      background-color: pink;
      color: #fff;
      text-align: center;
      /* padding-top: 50px; */
      box-sizing: border-box;
      font-weight: 400;
    }
    .btn {
      font-size: 30px;
      padding-top: 0px;
      border: 0px;
      color: black;
    }
    .active {
      background-color: aqua;
      /* position: absolute; */
    }
    
  </style>
  <style></style>
  <body>
    <i class="box">
      <!-- <div class="option">1</div>
      <div class="option">2</div>
      <div class="option">3</div>
      <div class="option">4</div> -->
      <img
        src="./78578d4406bbb556a8efa0fd8315dae2.jpg"
        alt="倪妮"
        class="option"
      />
      <img src="./9cdf-kakmcxe8155061.png" alt="韩国明星" class="option" />
      <img
        src="./bc901c64d4c129196dd87465c0776633.jpeg"
        alt="李沁"
        class="option"
      />
      <img src="./R-C.png" alt="张婧仪" class="option" />
      <button class="option btn">启动</button>
      <img src="./20191211033143172.jpg" class="option" alt="韩国明星" />
      <img src="./20201003232050_hblre.jpg" class="option" alt="马思纯" />
      <img src="./20220527015642_d502a.jpg" class="option" alt="景田" />
      <img src="./20220604220522_616a9.jpg" class="option" alt="刘亦菲" />
    </i>
  </body>
  <script>
    let btn = document.querySelector("button"); //按钮
    let option = document.querySelectorAll("img");
    let timer = null;

    console.log(option);
    btn.onclick = function () {
      let num = 0;
      if (timer == null) {
        timer = setInterval(() => {
          num++;
          let ran = Math.round(Math.random() * (7 - 0) + 0);
          for (let i = 0; i < option.length; i++) {
            option[i].style.border = "0px";
          }
          option[ran].style.border = "2px solid red";
          if (num === 150) {
            clearInterval(timer);
            timer = null;
            option[ran].style.transition='all 0.5s';
            option[ran].style.width='600px';
            option[ran].style.height='600px';
            option[ran].style.position='absolute'
            // alert("你选择的女神的" + option[ran].alt);
          }
        }, 50);
      }
    };
  </script>
</html>

逻辑分析: