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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
Jquery获取radio选中的值
May 05 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jquery插件实现代码雨特效
Apr 24 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
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python数据可视化图实现过程详解
2020/06/12 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
大学生军训广播稿
2014/01/24 职场文书
班组建设经验交流材料
2014/05/12 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏