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 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
jquery实现聊天机器人
Feb 08 jQuery
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 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操作文件方法问答
2007/03/16 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
反邪教警示教育方案
2014/05/13 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
小学教师自我评价
2015/03/04 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
python unittest单元测试的步骤分析
2021/08/02 Python