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一句话全选/取消全选
Mar 01 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
bootstrap table实例详解
Jan 06 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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
一个查看session内容的函数
2006/10/09 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
用Python给文本创立向量空间模型的教程
2015/04/23 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python 循环while和for in简单实例
2016/08/16 Python
python opencv之分水岭算法示例
2018/02/24 Python
python微信公众号之关键词自动回复
2018/06/15 Python
基于python绘制科赫雪花
2018/06/22 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python类如何定义私有变量
2020/02/03 Python
利用python实现逐步回归
2020/02/24 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
详解如何修改python中字典的键和值
2020/09/29 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
工作交流会欢迎词
2014/01/12 职场文书
预备党员政审材料
2014/02/04 职场文书