简易轮播图和打地鼠

目录

轮播图

需求

思路

结构

代码实现

实现效果

总结

打地鼠

需求

思路分析

结构

代码实现

实现效果

总结


轮播图

需求

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

思路

结构

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

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

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

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

代码实现

html部分


  

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部分

0分

在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 + '分'
      }
    }
  }

实现效果

打地鼠演示

总结

打地鼠是个简单有趣的小游戏,也很容易实现。

你可能感兴趣的:(工作,javascript,前端,html,css3,css)