js 实现组图点击放大功能
需求
客户要求产品详情中的轮播图可以点击放大,并且放大后可以切换到其他图片
使用到的组件或者类库
- layer.js
- jquery
功能代码
经过一番改装,demo如下:
<!DOCTYPE html>
<html>
<head>
<title>image test</title>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/layer/3.1.1/layer.js"></script>
</head>
<body>
<div class="img">
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2462008823,1080205429&fm=26&gp=0.jpg"/>
<img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794242313,773207092&fm=26&gp=0.jpg"/>
<img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2533215658,320580699&fm=26&gp=0.jpg"/>
</div>
</body>
<script>
var imgs = $("img");
imgs.click(function(){
var that = this;
layer.photos({
photos:{
start:imgs.index(that),//当前元素索引
data:imgs,
},
anim:5
});
});
</script>
</html>