js realizes mouse switching pictures (no timer)

2021-10-24 19:00:44
OfStack

This article example for everyone to share the js mouse to switch pictures of the specific code, for your reference, the specific content is as follows

To achieve the effect, you can use the mouse to move on the corresponding small dots, or click on the left and right arrows to switch pictures, and show the number of pages of pictures at the top of the picture, and show the title of the corresponding picture at the bottom.

The full code is as follows:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Picture switching </title>
  <style>
    .picture {
      position: relative;
      width: 500px;
      height: 333px;
      margin: 0 auto;
      border: 2px solid rgb(231, 127, 217);
      overflow: hidden;
    }

    .radius {
      width: 100%;
      height: 10px;
      position: absolute;
      bottom: 30px;
      text-align: center;
    }

    .pg {     // Page number above picture 
      position: absolute;
      margin: 0;
      width: 100%;
      height: 20px;
      background-color: rgba(0, 0, 0, .4);
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }

    .title {
      position: absolute;
      width: 100%;
      bottom: 0px;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: rgb(21, 223, 72);
    }

    span {
      display: inline-block;
      border: 10px solid #fdfdfd;
      border-radius: 50%;
    }

    .active {
      border: 10px solid #656466;
    }

    /*  Left and right arrows  */
    .arrowhead-left,
    .arrowhead-right {
      position: absolute;
      width: 41px;
      height: 69px;
      font-size: 30px;
      line-height: 70px;
      text-align: center;
      color: #D6D8D4;
      background-color: rgba(0,0,0,.3);
    }

    .arrowhead-left {
      left: 0;
      top: 40%;
    }

    .arrowhead-right {
      right: 0;
      top: 40%;
    }
  </style>
</head>

<body>
  <div class="picture">
    <!--  Picture page number  -->
    <p class="pg"> Cover </p>
    <img src="./image/d8.jpeg" alt="">

    <!--  Small dot dot  -->
    <p class="radius"></p>
    <!--  The following title of the picture  -->
    <p class="title"> Title </p>

    <!--  Left and right arrows  -->
    <div class="arrowhead-left" id="al"> < </div> 
    <div class="arrowhead-right" id="ar"> > </div>
  </div>

  <script>
    var address = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"];
    // var imgs = document.getElementsByTagName("img");
    var imgs = document.querySelector("img");
    var len = address.length;
    var str = "";
    var pp = document.getElementsByTagName("p");// Gets the 1 Set of 
    // var pp = document.querySelector("p");  // Gets the 1 Elements 
    var al = document.getElementById("al");
    var ar = document.getElementById("ar");
    // Add span Label 
    for (i = 0; i < len; i++) {
      str += ' <span></span>'
    }
    console.log(str);
    console.log(pp);
    pp[1].innerHTML = str;
    var spans = pp[1].getElementsByTagName('span');
    spans[0].className = 'active';

    for (i = 0; i < len; i++) {
      spans[i].index = i;
      spans[i].onmouseover = function () {  // All dot classes are empty 
        for (i = 0; i < len; i++) {
          spans[i].className = "";
        }
        this.className = 'active';      // For clicking span (Dot) Add class name 
        imgs.src = address[this.index];  
        pp[0].innerHTML = [this.index + 1] + "/6";
        pp[2].innerHTML = " Scenery " + [this.index + 1];

      }
    }
    var n = 0 ;
    ar.onclick = function () {

      for (i = 0; i < len; i++) {
        spans[i].className = "";
      }

      spans[n].className = "active";
      imgs.src = address[n];
      pp[0].innerHTML = (n+1) + "/6";
      pp[2].innerHTML = " Scenery " +(n+1);
      if (n<5) {
        n++; 
      }
      else {
       n=0;
      }
    }
    al.onclick = function () {

     for (i = 0; i < len; i++) {
       spans[i].className = "";
     }
     
     spans[n].className = "active";
     imgs.src = address[n];
     pp[0].innerHTML = (n+1) + "/6";
     pp[2].innerHTML = " Scenery " +(n+1);
     if (n>0) {
       n--; 
     }
     else {}
      n=(len-1);
     }
     }
  </script>
</body>

</html>