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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 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
基于文本的访客签到簿
2006/10/09 PHP
与数据库连接
2006/10/09 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
php常用的工具开发整理
2019/09/26 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
报到证办理个人委托书
2014/10/06 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs