一、需求是上面展示一张大图,下面一排小图可以通过小图切换上面的大图,然后点击大图可以放大预览并可以左右切换上下件预览
二、具体使用方式引入相关的js、css,用cdn的方式引入加载会更快些
<link href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js"></script>
注意事项:因为需要点击放大的时候可以左右切换其他小图的大图,所以我们需要提前准备好列表可以设置display:none页面看不到即可
<div id="image-gallery">
<!-- 显示大图 -->
<img id="big-image" src="https://imagecdn.chengxuan.com/images/2023a/mini-641-1.jp