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


Posted in Javascript onJanuary 27, 2021

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
JavaScript实现切换多张图片
Jan 27 #Javascript
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
JavaScript实现点击切换功能
Jan 27 #Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 #Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 #Vue.js
vue实现轮播图帧率播放
Jan 26 #Vue.js
vue 组件基础知识总结
Jan 26 #Vue.js
You might like
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
获取URL文件名后缀
2013/10/24 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
jupyter安装小结
2016/03/13 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
python实现textrank关键词提取
2018/06/22 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
超市开学活动方案
2014/03/01 职场文书
公司晚会策划方案
2014/05/17 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers