当前位置：网站首页>Simple rotation map and hamster beating

There are still no living interns ...... So write a simple rotation chart to play . The specific requirements are , Use display:none Hide picture , Realize the rotation of pictures .

Ideas

structure

The specific structure is , Put several pictures in the parent container , These pictures can be arranged horizontally or vertically （ Because what's used here is display Realization , If you use the positioning implementation, you need to pay attention to the horizontal or vertical ）. There is only one picture at a time display by block, The rest are none, In this way, only one picture can be displayed . The width and height of the image are the same as that of the parent container , And set the parent container overflow:hidden（ Again , the reason being that display Realization , So you don't need to set this , But in order to load normally , The setting is better ）.

This is it. html and css Basic structure . Then the rotation effect needs the help of JavaScript Realization , Be sure to use a timer . In order to show only one picture at the same time , We need a variable index Record the number of pictures currently displayed . Encapsulate a method , Only the second index A picture , And make index Increasing , Then use the timer , Call this method every once in a while .

The function of the basic rotation chart is realized in this way .

You can also add two buttons on both sides of the picture , As a button to display the previous and next . When you click the previous button , Clear the timer first , To avoid confusion , And then modify index And let No index Pictures show , Restart the timer . The logic of the next button is similar .

Code implementation

html part

<!-- container Used to hold pictures  -->
  <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"> On </div>
    <div class="btn next"> Next </div>
  </div>

PS： The pictures are all gaiyuexi photos , The cover is so beautiful, woo woo ......

css part

    .container {
      display: flex;
      width: 400px;
      height: 400px;
      overflow-x: hidden;
      margin: 200px auto;
      /*  Relative positioning  */
      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 part

  //  Which picture is currently displayed 
  let index = 0;
  //  Get all pictures 
  let img_list = document.getElementsByClassName('picture')
 
  //  display picture 
  function showImg() {
    //  Now index Increasing , This will guarantee index It's really the picture being displayed 
    index = (index + 1) % 6
    //  Except for index Zhang Wai all display:none
    for (let i = 0; i < img_list.length; i++) {
      img_list[i].style.display = "none"
    }
    img_list[index].style.display = "block"
  }
 
  //  Turn on timer 
  let timer = setInterval(showImg, 1500);
 
  //  Click the previous button 
  function last() {
    clearInterval(timer)
    if (index === 0) {
      index = 5
    } else {
      index--
    }
    //  Except for index Zhang Wai all 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);
  }
 
  //  Click on the next picture 
  function next() {
    clearInterval(timer)
    index = (index + 1) % 6
    //  Except for index Zhang Wai all 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;

Realization effect

Carousel presentation

summary

This article is just for simple use display Property implements the rotation graph , The effect is not better positioned , Do it later when you have time .

Whac-A-Mole

demand

Continue without incident ...... Write a play with a hamster .

Thought analysis

structure

The structure is actually very simple . I designed a nine square , Gopher pictures appear randomly in each Jiugong grid . The specific implementation method is , Parent element div Contained in the 9 individual div, And open the parent element BFC, Facilitate the floating of sub elements . All child elements float to the left , And set up border、width、height, Three per line , Form a nine palace grid . Every subelement is item class , Set some uniform styles . There are sub elements of beating hamsters , Set to mouse class .

That's it HTML and css, It's time to design JavaScript.

The logic is , Turn on timer , Each time it produces something different from the last 0-8 The random number position, Then set No position The child element is mouse、item class , The rest is just item class . then , For each item Are bound to click event callback functions , Judge event Target element , namely event.target, its class Is there a mouse. If there is mouse, Then hit and score .

It's not hard to think , You can write like clouds and flowing water .

Code implementation

html part

<div class="count_wrapper">0 branch </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>

stay container Place nine child elements in .

css part

    .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;
      /*  Turn on BFC */
      overflow: hidden;
    }

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

    /*  Show gopher item */
    .mouse {
      cursor: pointer;
      background-image: url('./pictures/mouse.jpg');
      background-size: cover;
      background-position: center;
    }

JavaScript part

  //  Randomly display the place of gophers 
  let position = 0
  //  All positions 
  let mouses = document.getElementsByClassName('item')
  //  The current score 
  let count = 0;
  //  Scoring elements 
  let count_wrapper = document.getElementsByClassName('count_wrapper')[0]

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

  //  Randomly display gophers 
  function randomShowMouse() {
    let new_position = Math.floor(Math.random() * 9)
    //  Find new random points 
    while (new_position == position) {
      new_position = Math.floor(Math.random() * 9)
    }
    position = new_position
    //  Show gophers 
    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 + ' branch '
      }
    }
  }