简易轮播图和打地鼠

盖玥希圈外男友(섭소우)

已于 2022-07-19 14:22:57 修改

阅读量502

点赞数 1

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

于 2022-07-19 14:17:35 首次发布

本文链接：https://blog.csdn.net/weixin_45792464/article/details/125870914

版权

工作专栏收录该内容

8 篇文章 0 订阅

订阅专栏

轮播图

需求

仍然是没有活的实习生......所以写个最简单的轮播图玩玩。具体要求就是，使用display:none隐藏图片，实现图片的轮播。

思路

结构

具体结构就是，父容器中盛放若干图片，这些图片横向或者纵向排列都行（因为这里使用的是display实现，如果是使用定位实现就需要注意横向或者纵向了）。每一时刻只有一张图片display为block，其余都是none，这样就能保证只有一张图片显示。图片的宽高跟父容器一样，并且设置父容器overflow:hidden（同样，因为是display实现，所以也不需要一定设置这个，但是为了加载时效果正常，还是设置上比较好）。

这就是html和css的基本结构。然后轮播效果需要借助JavaScript实现，一定要用到定时器。为了在同一时刻只有一张图片显示，我们需要一个变量index记录当前显示的是第几张图片。封装一个方法，只显示第index张图片，并且使index递增，然后使用定时器，每隔一段时间调用这个方法即可。

基本轮播图的功能就这样实现。

还可以在图片两侧加上两个按钮，作为显示上一张和下一张的按钮。点击上一张按钮时，先清除定时器，以免引起混乱，然后修改index并让第index张图片显示，再重新开启定时器。下一张按钮的逻辑类似。

代码实现

html部分

<!-- container用来装图片 -->
  <div class="container">
    <img src="pictures/1.jpg" class="picture">
    <img src="pictures/2.jpg" class="picture">
    <img src="pictures/3.jpg" class="picture">
    <img src="pictures/4.jpg" class="picture">
    <img src="pictures/5.jpg" class="picture">
    <img src="pictures/6.jpg" class="picture">
    <div class="btn last">上</div>
    <div class="btn next">下</div>
  </div>

PS：图片都是盖玥希照片，盖盖太好看了呜呜呜呜......

css部分

    .container {
      display: flex;
      width: 400px;
      height: 400px;
      overflow-x: hidden;
      margin: 200px auto;
      /* 相对定位 */
      position: relative;
    }
 
    .container .picture {
      width: 400px;
      height: 400px;
    }
 
    .container .btn {
      position: absolute;
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      background-color: aliceblue;
      border-radius: 50%;
      cursor: pointer;
    }
 
    .container .last {
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
 
    .container .next {
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }

JavaScript部分

  // 当前显示第几张图片
  let index = 0;
  // 获取所有图片
  let img_list = document.getElementsByClassName('picture')
 
  // 显示图片
  function showImg() {
    // 这时候index递增，这样能保证index确实是正在显示的图片
    index = (index + 1) % 6
    // 除了第index张外全部display:none
    for (let i = 0; i < img_list.length; i++) {
      img_list[i].style.display = "none"
    }
    img_list[index].style.display = "block"
  }
 
  // 开启定时器
  let timer = setInterval(showImg, 1500);
 
  // 点击上一张按钮
  function last() {
    clearInterval(timer)
    if (index === 0) {
      index = 5
    } else {
      index--
    }
    // 除了第index张外全部display:none
    for (let i = 0; i < img_list.length; i++) {
      img_list[i].style.display = "none"
    }
    img_list[index].style.display = "block"
    timer = setInterval(showImg, 1500);
  }
 
  // 点击下一张图片
  function next() {
    clearInterval(timer)
    index = (index + 1) % 6
    // 除了第index张外全部display:none
    for (let i = 0; i < img_list.length; i++) {
      img_list[i].style.display = "none"
    }
    img_list[index].style.display = "block"
    timer = setInterval(showImg, 1500);
  }
 
  let btns = document.getElementsByClassName('btn')
  btns[0].onclick = last;
  btns[1].onclick = next;

实现效果

轮播图演示

总结

本文只是简单用display属性实现了轮播图，效果上并没有定位好一些，以后有时间再做吧。

打地鼠

需求

继续无事......写个打地鼠玩玩。

思路分析

结构

结构其实非常简单。我设计一个九宫格，每个九宫格内随机出现地鼠图片。具体实现方法就是，父元素div中包含9个div，并给父元素开启BFC，便于子元素浮动。子元素全部向左浮动，并且设置好border、width、height，每行三个，形成九宫格。每个子元素都是item类，设置一些统一的样式。有打地鼠的子元素，设置为mouse类。

说完了HTML和css，就该设计JavaScript。

逻辑就是，开启定时器，每次产生与上一次不同的0-8的随机数position，然后设置第position个子元素为mouse、item类，其余都仅仅是item类。然后，给每个item都绑定点击事件回调函数，判断event的目标元素，即event.target，它的class中有没有mouse。如果有mouse，则击中得分。

思路不是很难，行云流水般就可以写出来了。

代码实现

html部分

<div class="count_wrapper">0分</div>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

在container中放置九个子元素。

css部分

    .count_wrapper {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
    }

    .container {
      width: 600px;
      height: 600px;
      margin: 0 auto;
      background-color: antiquewhite;
      /* 开启BFC */
      overflow: hidden;
    }

    .container .item {
      float: left;
      border: 1px solid rgb(211, 209, 209);
      width: 198px;
      height: 198px;
    }

    /* 显示地鼠的item */
    .mouse {
      cursor: pointer;
      background-image: url('./pictures/mouse.jpg');
      background-size: cover;
      background-position: center;
    }

JavaScript部分

  // 随机显示地鼠的地方
  let position = 0
  // 所有位置
  let mouses = document.getElementsByClassName('item')
  // 当前得分
  let count = 0;
  // 得分元素
  let count_wrapper = document.getElementsByClassName('count_wrapper')[0]

  // 显示地鼠
  function showMouse() {
    for (let i = 0; i < mouses.length; i++) {
      mouses[i].className = 'item'
    }
    mouses[position].className += " mouse"
  }

  // 随机显示地鼠
  function randomShowMouse() {
    let new_position = Math.floor(Math.random() * 9)
    // 找到新的随机点
    while (new_position == position) {
      new_position = Math.floor(Math.random() * 9)
    }
    position = new_position
    // 显示地鼠
    showMouse()
  }
  setInterval(randomShowMouse, 600);

  let items = document.getElementsByClassName('item')
  for (let i in items) {
    items[i].onclick = function (e) {
      if (e.target.className.indexOf('mouse') > -1) {
        count++
        count_wrapper.innerText = count + '分'
      }
    }
  }