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的toLowerCase方法用法实例
Jan 27 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
vue中nextTick用法实例
Sep 11 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
牡丹941资料
2021/03/01 无线电
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
全面理解闭包机制
2016/07/11 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
安装dbus-python的简要教程
2015/05/05 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
python 实现按对象传值
2019/12/26 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
EJB timer的种类
2014/10/28 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
遗失证明范文
2015/06/19 职场文书
团支部书记竞选稿
2015/11/21 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Python超详细分步解析随机漫步
2022/03/17 Python