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

作者:枫思然 时间:2023-09-07 02:44:58 

本文实例为大家分享了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 (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 = "风光" +(n+1);
    if (n>0) {
      n--;
    }
    else {}
     n=(len-1);
    }
    }
 </script>
</body>

</html>

来源:https://blog.csdn.net/qq_38318589/article/details/99050117

标签:js,鼠标切换
0
投稿

猜你喜欢

  • sqlserver之datepart和datediff应用查找当天上午和下午的数据

    2024-01-14 22:27:42
  • ASP 千万级数据分页的存储过程

    2011-04-14 11:08:00
  • JavaScript设计模式之单例模式

    2024-04-29 14:08:39
  • mysql的group_concat函数使用示例

    2024-01-22 00:10:02
  • 神经网络(BP)算法Python实现及应用

    2021-11-12 20:00:14
  • 浅谈python中的错误与异常

    2021-11-06 11:51:23
  • Selenium(Python web测试工具)基本用法详解

    2022-08-02 22:04:39
  • golang图片处理库image基本操作

    2024-04-26 17:32:04
  • Python接口自动化之文件上传/下载接口详解

    2022-01-02 17:32:28
  • 全面了解Python环境配置及项目建立

    2023-11-03 18:40:44
  • 重命名SQLServer数据库的方法

    2012-07-11 15:39:37
  • python实现两个一维列表合并成一个二维列表

    2023-08-06 12:59:44
  • Python如何读写二进制数组数据

    2022-01-12 19:35:57
  • tensorflow之如何使用GPU而不是CPU问题

    2023-07-06 13:05:48
  • Python的Flask框架中@app.route的用法教程

    2022-05-14 07:25:19
  • 利用Python实现K-Means聚类的方法实例(案例:用户分类)

    2023-05-15 13:14:34
  • Django实现文件上传下载功能

    2023-06-13 20:09:46
  • Python中每次处理一个字符的5种方法

    2023-09-26 02:49:13
  • ajax实现无刷新上传文件功能

    2024-04-17 10:39:22
  • 简单了解python shutil模块原理及使用方法

    2023-02-12 22:07:44
  • asp之家 网络编程 m.aspxhome.com