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 相关文章推荐
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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
php文件上传类完整实例
2016/05/14 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
运行Python编写的程序方法实例
2020/10/21 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
中学教师管理制度
2014/01/14 职场文书
一年级班主任寄语
2014/01/19 职场文书
党员一帮一活动总结
2014/07/08 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
工作表现证明
2015/06/15 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
教你怎么用Python生成九宫格照片
2021/05/20 Python
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers