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判断对象是否存在的方法
Feb 05 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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编程与应用
2006/10/09 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python全局变量操作详解
2015/04/14 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
django 实现简单的插入视频
2020/04/07 Python
学生会干部自荐信
2014/02/04 职场文书
大学毕业感言一句话
2014/02/06 职场文书
高中军训感想300字
2014/03/04 职场文书
工程售后服务承诺书
2014/05/21 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书