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 相关文章推荐
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
javascript的函数作用域
Nov 12 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
Sort()函数的多种用法
Mar 20 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php设置允许大文件上传示例代码
2014/03/10 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
python回调函数用法实例分析
2015/05/09 Python
Python有序字典简单实现方法示例
2017/09/28 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
教学大赛获奖感言
2014/01/15 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
《胡杨》教学反思
2014/02/16 职场文书
销售助理岗位职责
2014/02/21 职场文书
交通事故和解协议书
2015/01/27 职场文书
校运会广播稿
2015/08/19 职场文书
导游词之太原天龙山
2020/01/02 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
python数字转对应中文的方法总结
2021/08/02 Python
基于Python实现股票收益率分析
2022/04/02 Python