用jQuery如何写一个查看图片的功能？

发布时间：2022-01-12 11:17 所属栏目：13 来源：互联网

导读：这篇文章给大家分享的是用jQuery写一个查看图片的功能的内容，可以实现点击左右查看图片效果等等，小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。 HTML !-- 放缩略图的div -- div class=sl img src=images/1.jpg / img src=images/2

这篇文章给大家分享的是用jQuery写一个查看图片的功能的内容，可以实现点击左右查看图片效果等等，小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。

　　HTML

　　
　　 <div class="sl">
　　    <img src="images/1.jpg" />
　　    <img src="images/2.jpg" />
　　    <img src="images/3.jpg" />
　　 </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);
　　    });
　　 });
　　});

（编辑：ASP站长网）