js实现鼠标切换图片（无定时器）

本文实例为大家分享了js实现鼠标切换图片的具体代码，供大家参考，具体内容如下

实现效果，可以利用鼠标移动在对应的小点点上，或者点击左右两侧的箭头切换图片，并在图片的上方显示出图片的页数，下方显示出对应图片的标题。

全部代码如下：

!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>
    图片切换/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 {
         //图片上方页码      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;
    }
    /* 左右箭头 */    .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">
        !-- 图片页码 -->
        p class="pg">
    封面/p>
        img src="./image/d8.jpeg" alt="">
        !-- 小圆点点 -->
        p class="radius">
    /p>
        !-- 图片的下面标题 -->
        p class="title">
    标题/p>
        !-- 左右箭头 -->
        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");
    //获取的是一个集合    // var pp = document.querySelector("p");
      //获取的是一个元素    var al = document.getElementById("al");
        var ar = document.getElementById("ar");
        //添加span标签    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 () {
      //所有圆点的类为空        for (i = 0;
     i  len;
 i++) {
              spans[i].className = "";
        }
            this.className = 'active';
          //给点击的span（圆点）添加类名        imgs.src = address[this.index];
              pp[0].innerHTML = [this.index + 1] + "/6";
            pp[2].innerHTML = "风光" + [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 = "风光" +(n+1);
      if (n5) {
            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 = "风光" +(n+1);
         if (n>
0) {
           n--;
      }
     else {
}
          n=(len-1);
     }
     }
      /script>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JavaScript定时器实现限时秒杀功能
• js实现0ms延时定时器的几种方式
• JavaScript定时器实现无缝滚动图片
• 利用JS定时器实现元素移动
• js定时器出现第一次延迟的原因及解决方法
• 解决js中的setInterval清空定时器不管用问题
• JS定时器如何实现提交成功提示功能
• JavaScript 定时器详情

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！