jQuery实现查看图片功能


Posted in jQuery onDecember 01, 2020

本文实例为大家分享了jQuery实现查看图片的具体代码,供大家参考,具体内容如下

HTML

<!-- 放缩略图的div -->
  <div class="sl">
    <img src="images/1.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
  </div>
  <!-- 实现关灯的div -->
  <div class="gd"></div>
  <div class="yt">
    <!-- 左翻按钮 -->
    <div class="left">
      <img src="images/left.png" alt="" width="100">
    </div>
    <div class="tp">
      <!-- 展示原图 -->
      <img src="images/1.jpg" class="show" />
      <!--放开始和结束图片的盒子 -->
       <div class="ss" style="display: none;">
        <img src="images/start.png" alt="" width="50" class="start">
      </div>
    </div>
    <!-- 右翻按钮 -->
    <div class="right">
      <img src="images/right.png" alt="" width="100">
    </div>
</div>

CSS

html,body{
    padding: 0;
    margin: 0;
  }
  .sl img {
    width: 300px;
  }

  .gd {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 900;
    display: none;
    top: 0;
    left: 0;
  }

  .sl {
    position: absolute;
    z-index: 888;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sl>img {
    width: 25%;
  }

  .yt {
    z-index: 990;
    position: absolute;
    display: none;
    left: 500px;
    top: 200px;
  }

  .tp {
    margin: 0 20px;
  }

  .yt>div {
    display: inline-block;
  }

  .left,
  .right {
    position: relative;
    top: -110px;
    cursor: pointer;
  }

  .ss {
    position: relative;
    width: 50px;
    height: 50px;
    left: 270px;
  }

  .start {
    z-index: 990;
    position: absolute;
  }

JS

var max = $(".sl img").length;
$(function (e) {
  var width = $(window).width();
  var height = $(window).height();
  $(".gd").css({
    "height": height,
    "width": width
  });

  //左翻按钮动画
  $(".left").hover(
    function () {
      $(this).animate({
        "left": "-10"
      });
    },
    function () {
      $(this).animate({
        "left": "0"
      });
    }
  );
  //右翻按钮动画
  $(".right").hover(
    function () {
      $(this).animate({
        "right": "-10"
      });
    },
    function () {
      $(this).animate({
        "right": "0"
      });
    }
  );

  //被点击的缩略图
  $(".sl>img").click(function (e) {
    $(".gd").show(500);
    $(".yt").fadeIn(800);
    var index = $(this).index(); //当前被点击图片的索引
    $(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
    //左翻
    $(".left").click(function (e) {
      if (index - 1 < 0) {
        index = max - 1;
      } else {
        index = index - 1;
      }
      $(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
    });
    //右翻
    $(".right").click(function (e) {
      if (index == max - 1) {
        index = 0;
      } else {
        index = index + 1;
      }
      $(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
    });

    //隐藏和显示播放按钮
    $(".tp").hover(
      function () {
        $(".ss").fadeIn(500);
        $(this).animate({
          "opacity": "0.7"
        }, 700);
      },
      function () {
        $(".ss").fadeOut(500);
        $(this).animate({
          "opacity": "1"
        }, 700);
      }
    );
 //点击开始播放 再次点击结束播放
    let flag = true;
    $(".start").click(function () {
      if (flag == true) {
        time = setInterval(function () {
          if (index == max - 1) {
            index = 0;
          } else {
            index = index + 1;
          }
          $(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
        }, 2000);
        flag = false;
        $(".start").attr("src", "images/stop.png");
      } else {
        clearInterval(time);
        flag = true;
        $(".start").attr("src", "images/start.png");
      }
    });
    let h = $(".tp>img").height();
    $(".ss").css({
      "top": -h / 2 - 25
    });
    //隐藏关灯效果
    $(".gd").click(function () {
      $(".gd").hide(800);
      $(".yt").fadeOut(500);
    });
  });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
基于jQuery拖拽事件的封装
Nov 29 #jQuery
jQuery实现动态操作table行
Nov 23 #jQuery
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
如何在vue 中引入使用jquery
Nov 10 #jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 #jQuery
You might like
javascript GUID生成器实现代码
2009/10/31 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
node.js操作mongodb简单示例分享
2017/05/25 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
《最可爱的人》教学反思
2014/02/14 职场文书
校园公益广告语
2014/03/13 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
装配出错检讨书
2014/09/23 职场文书
房屋维修申请报告
2015/05/18 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
Python实现归一化算法详情
2022/03/18 Python