• 售前

  • 售后

热门帖子
入门百科

js实现鼠标切换图片(无定时器)

[复制链接]
123457287 显示全部楼层 发表于 2021-10-25 19:56:04 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js实现鼠标切换图片的详细代码,供各人参考,详细内容如下
实现结果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方体现出图片的页数,下方体现出对应图片的标题。

全部代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>图片切换</title>
  8.   <style>
  9.     .picture {
  10.       position: relative;
  11.       width: 500px;
  12.       height: 333px;
  13.       margin: 0 auto;
  14.       border: 2px solid rgb(231, 127, 217);
  15.       overflow: hidden;
  16.     }
  17.     .radius {
  18.       width: 100%;
  19.       height: 10px;
  20.       position: absolute;
  21.       bottom: 30px;
  22.       text-align: center;
  23.     }
  24.     .pg {     //图片上方页码
  25.       position: absolute;
  26.       margin: 0;
  27.       width: 100%;
  28.       height: 20px;
  29.       background-color: rgba(0, 0, 0, .4);
  30.       text-align: center;
  31.       font-size: 16px;
  32.       font-weight: 600;
  33.       color: #fff;
  34.     }
  35.     .title {
  36.       position: absolute;
  37.       width: 100%;
  38.       bottom: 0px;
  39.       text-align: center;
  40.       font-size: 16px;
  41.       font-weight: 600;
  42.       color: rgb(21, 223, 72);
  43.     }
  44.     span {
  45.       display: inline-block;
  46.       border: 10px solid #fdfdfd;
  47.       border-radius: 50%;
  48.     }
  49.     .active {
  50.       border: 10px solid #656466;
  51.     }
  52.     /* 左右箭头 */
  53.     .arrowhead-left,
  54.     .arrowhead-right {
  55.       position: absolute;
  56.       width: 41px;
  57.       height: 69px;
  58.       font-size: 30px;
  59.       line-height: 70px;
  60.       text-align: center;
  61.       color: #D6D8D4;
  62.       background-color: rgba(0,0,0,.3);
  63.     }
  64.     .arrowhead-left {
  65.       left: 0;
  66.       top: 40%;
  67.     }
  68.     .arrowhead-right {
  69.       right: 0;
  70.       top: 40%;
  71.     }
  72.   </style>
  73. </head>
  74. <body>
  75.   <div class="picture">
  76.     <!-- 图片页码 -->
  77.     <p class="pg">封面</p>
  78.     <img src="./image/d8.jpeg" alt="">
  79.     <!-- 小圆点点 -->
  80.     <p class="radius"></p>
  81.     <!-- 图片的下面标题 -->
  82.     <p class="title">标题</p>
  83.     <!-- 左右箭头 -->
  84.     <div class="arrowhead-left" id="al"> < </div>
  85.     <div class="arrowhead-right" id="ar"> > </div>
  86.   </div>
  87.   <script>
  88.     var address = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"];
  89.     // var imgs = document.getElementsByTagName("img");
  90.     var imgs = document.querySelector("img");
  91.     var len = address.length;
  92.     var str = "";
  93.     var pp = document.getElementsByTagName("p");//获取的是一个集合
  94.     // var pp = document.querySelector("p");  //获取的是一个元素
  95.     var al = document.getElementById("al");
  96.     var ar = document.getElementById("ar");
  97.     //添加span标签
  98.     for (i = 0; i < len; i++) {
  99.       str += ' <span></span>'
  100.     }
  101.     console.log(str);
  102.     console.log(pp);
  103.     pp[1].innerHTML = str;
  104.     var spans = pp[1].getElementsByTagName('span');
  105.     spans[0].className = 'active';
  106.     for (i = 0; i < len; i++) {
  107.       spans[i].index = i;
  108.       spans[i].onmouseover = function () {  //所有圆点的类为空
  109.         for (i = 0; i < len; i++) {
  110.           spans[i].className = "";
  111.         }
  112.         this.className = 'active';      //给点击的span(圆点)添加类名
  113.         imgs.src = address[this.index];  
  114.         pp[0].innerHTML = [this.index + 1] + "/6";
  115.         pp[2].innerHTML = "风光" + [this.index + 1];
  116.       }
  117.     }
  118.     var n = 0 ;
  119.     ar.onclick = function () {
  120.       for (i = 0; i < len; i++) {
  121.         spans[i].className = "";
  122.       }
  123.       spans[n].className = "active";
  124.       imgs.src = address[n];
  125.       pp[0].innerHTML = (n+1) + "/6";
  126.       pp[2].innerHTML = "风光" +(n+1);
  127.       if (n<5) {
  128.         n++;
  129.       }
  130.       else {
  131.        n=0;
  132.       }
  133.     }
  134.     al.onclick = function () {
  135.      for (i = 0; i < len; i++) {
  136.        spans[i].className = "";
  137.      }
  138.      
  139.      spans[n].className = "active";
  140.      imgs.src = address[n];
  141.      pp[0].innerHTML = (n+1) + "/6";
  142.      pp[2].innerHTML = "风光" +(n+1);
  143.      if (n>0) {
  144.        n--;
  145.      }
  146.      else {}
  147.       n=(len-1);
  148.      }
  149.      }
  150.   </script>
  151. </body>
  152. </html>
复制代码
以上就是本文的全部内容,渴望对各人的学习有所资助,也渴望各人多多支持草根技术分享。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作