点击swiper里的图，预览放大效果

原创已于 2025-05-28 15:48:09 修改 · 1.7k 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#css #html #css3
于 2023-03-04 15:52:17 首次发布
前端专栏收录该内容
4 篇文章
订阅专栏
本文介绍如何在含有多个Swiper的页面中，点击任一Swiper内的图片，实现图片放大预览功能。详细讲解了相关CSS和HTML代码实现这一交互效果。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
最近遇到一个需求，一个页面有几个swiper，要求点击每个swiper里的图，被点击的图会放大呈现预览效果。如图：
代码放上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui">
<meta charset="UTF-8">
<title>Document</title>
<link href=" https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/swiper.min.css"> -->
<style>
.showBigImg {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  z-index: 999;
}
.showBigImg .closeBigImg {
  position: absolute;
  right: 35px;
  top: 35px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #000;
  text-align: center;
  line-height: 45px;
  font-size: 45px;
  color: #fff;
  z-index: 9999;
  user-select: none;
}
.showBigImg .showBigImgWrap {
  position: relative;
  width: 30%;
  height: 100%;
  overflow: hidden;
}
.showBigImg .showBigImgWrap .allImgBox {
  position: relative;
  width: 100%;
  height: 100%;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte {
  float: left;
  width: 100%;
  height: 100%;
  text-align: center;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte span {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte img {
  max-width: 90%;
  max-height: 90%;
  vertical-align: middle;
}
.small-img img{
  width: 150px;
}



.swiper-slide {
    text-align: center;
    font-size: 18px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide img {
    width: 100%;
}
.showBigImgWrap img {
    width: auto;
}
</style>
</head>
<body>



<div style="width: 1200px;margin: 0 auto;">
		<div class="swiper-container swiper-container-initialized swiper-container-horizontal ">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img  class="img" src="img/g1.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g2.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g3.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g4.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g5.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g6.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g7.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g8.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g9.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g10.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g11.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g12.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g13.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g14.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g15.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g16.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g17.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g18.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g19.jpg" /></div>
				<div class="swiper-slide"><img  class="img" src="img/g20.jpg" /></div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
		</div>
	</div>


 <div style="width: 1200px;">
		<div class="swiper-container swiper-container-initialized swiper-container-horizontal ">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img  class="iosimg" src="img/ios1.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios2.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios3.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios4.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios5.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios6.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios7.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios8.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios9.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios10.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios11.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios12.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios13.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios14.jpg" /></div>
				<div class="swiper-slide"><img  class="iosimg" src="img/ios15.jpg" /></div>
			</div>
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
		</div>
	</div> 

<div class="showBigImg">
    <div class="closeBigImg">
        ×
    </div>
    <div class="showBigImgWrap swiper-container swiper-no-swiping">
        <div class="allImgBox swiper-wrapper">
            <div class="imgIte swiper-slide">
                <span></span><img src="img/slide1.png" alt="">
            </div>
        </div>
        <a href="javascript:;" class="swiper-button-prev"></a>
        <a href="javascript:;" class="swiper-button-next"></a>
    </div>
</div>


<script src=" https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src=" https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>


<script>
   //五张图
   var swiper = new Swiper('.swiper-container', {
	 noSwiping : true,
     slidesPerView:4,
     spaceBetween: 30,
	 prevButton:'.swiper-button-prev',
	 nextButton:'.swiper-button-next',
     pagination: {
       el: '.swiper-pagination',
       clickable: true,
	   observer: true, //修改swiper自己或子元素时，自动初始化swiper
	   observeParents: true, //修改swiper的父元素时，自动初始化swiper
     },
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
     },
   });
  
 </script>
 
 
 
<script>

    var myswiper = new Swiper('.showBigImgWrap',{
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next'
    });

    var outwrap = $('.showBigImg');
    var close = $('.closeBigImg');
    var box = $('.allImgBox');

        close.click(function () {
            outwrap.fadeOut();
        });

    //BigImg代码生成
    function BigImgSlide2(srcArr,posi){

        outwrap.fadeIn();

        var str = '';
        for(var j=0; j<srcArr.length; j++){
            str += '<div class="imgIte swiper-slide"><span></span><img src="'+ srcArr[j]+'" alt=""></div>';
        }
        box.html(str);

        var imgIte = $('.imgIte');
        imgIte.css({
            width: window.innerWidth,
            height: window.innerHeight
        });

        myswiper.update();
        myswiper.slideTo(posi, 0);
    }

//BigImg代码生成
    function BigImgSlide1(srcArr1,posi1){

        outwrap.fadeIn();

        var str1 = '';
        for(var i=0; i<srcArr1.length; i++){
            str1 += '<div class="imgIte swiper-slide"><span></span><img src="'+ srcArr1[i]+'" alt=""></div>';
        }
        box.html(str1);

        var imgIte = $('.imgIte');
        imgIte.css({
            width: window.innerWidth,
            height: window.innerHeight
        });

        myswiper.update();
        myswiper.slideTo(posi1, 0);
    }


    //第一个swiper图片点击
    $(function () {
        var img = $('.img');
        img.click(function () {
            var arr = [];
            img.each(function () {
                arr.push($(this).attr('src'));
            });
            BigImgSlide2(arr, img.index(this));
        });
    });


    //第二个swiper图片点击
    $(function () {
        var img1 = $('.iosimg');
        img1.click(function () {
            var arr1 = [];
            img1.each(function () {
                arr1.push($(this).attr('src'));
            });
            BigImgSlide1(arr1, img1.index(this));
        });
    });
	
</script>
</body>
</html>