js图片点击放大之后左右切换效果

要实现点击放大不要切换效果请转至:https://blog.youkuaiyun.com/white1114579650/article/details/111941631

效果如下

核心HTML代码

<img style="width: 150px;height: 150px;padding: 10px;" src="img/微信图片_20201230091744.jpg" class="img-responsive">
<img style="width: 150px;height: 150px;padding: 10px;" src="img/微信图片_20201230091800.jpg" class="img-responsive">
<div class="gray"  style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"></div>
<div class="showImg"  style="position:absolute;z-index: 10;display: none;">
    <img src="img/right.png" class="prev" style="position: absolute;margin-left: -90px;width: 100px;height: 100px;text-align: center;">
    <img src="img/left.png" class="next" style="position: absolute;margin-left: 390px;width: 100px;height: 100px;text-align: center;">
    <img src="#"  style="border:5px solid #fff;" class="bigImg">
</div>

核心js代码

var index=0;
var bigSrc="";

$(".img-responsive").click(function() {
    index = $(this).index();
    $(".gray").show();
    $(".showImg").show();
    bigSrc = $(this).attr("src");
    $(".showImg img.bigImg").attr("src", bigSrc).on('load',function() {
        var windowW = $(window).width() var windowH = $(window).height();
        var realWidth = this.width;
        var readHeight = this.height;
        var imgWidth, imgHeight;
        var scale = 0.3;
        if (realWidth > windowW + scale) {
            imgHeight = windowH * scale;
            imgWidth = imgHeight / readHeight * realWidth;
            if (imgWidth > windowW * scale) {
                imgWidth = windowW * scale;
            }
        } else if (realWidth > windowW * scale) {
            imgWidth = windowW * scale;
            imgHeight = imgWidth / realWidth * readHeight;
        } else {
            imgWidth = realWidth;
            imgHeight = readHeight;
        }
        $(".showImg img.bigImg").css("width", imgWidth);

        $(".prev").css("margin-top", $(".bigImg").height() / 2 - 50);
        $(".next").css("margin-top", $(".bigImg").height() / 2 - 50);
        var w = (windowW - imgWidth) / 2;
        var h = (windowH - imgHeight) / 2;
        $(".showImg").css({
            "top": h,
            "left": w
        });
    });

});
$(".gray").click(function() {
    $(".gray").hide();
    $(".showImg").hide();
});
$(".showImg img.next").click(function() {
    index++;
    if (index > $(".img-responsive").length - 1) {
        index = 0;
    }
    bigSrc = $(".img-responsive").eq(index).attr("src");
    $(".showImg img.bigImg").attr("src", bigSrc);
});
$(".showImg img.prev").click(function() {
    index--;
    if (index < 0) {
        index = $(".img-responsive").length - 1;
    }
    bigSrc = $(".img-responsive").eq(index).attr("src");
    $(".showImg img.bigImg").attr("src", bigSrc);

});

注：必须引入jquery文件！！！
 

要实现点击放大不要切换效果请转至:https://blog.youkuaiyun.com/white1114579650/article/details/111941631