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 EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery.pager.js分页实现详解
Jul 29 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
Apache服务器无法使用的解决方法
2013/05/08 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
JQuery小知识
2010/10/15 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
vue3.0 上手体验
2020/09/21 Javascript
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
假日旅行社实习自我鉴定
2013/09/24 职场文书
家长通知书家长评语
2014/04/17 职场文书
红头文件任命书范本
2014/06/05 职场文书
后勤个人工作总结
2015/02/28 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Java对文件的读写操作方法
2022/04/29 Java/Android