主要使用swiper插件,这里使用各小技巧,就是用两个swiper容器,点击一个小图容器,去让大图容器展示出来

小图容器

 <div class="q_banner">

            <div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-slide preview">
<a href="images/img_01.jpg"><img src="data:images/img_01.jpg" alt="" /></a> </div>
<div class="swiper-slide preview">
<a href="images/img_02.jpg"><img src="data:images/img_02.jpg" alt="" /></a> </div>
<div class="swiper-slide preview">
<a href="images/img_03.jpg"><img src="data:images/img_03.jpg" alt="" /></a>
</div> </div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>

遮罩层

 <div class="mask"></div>

大图容器

<div class="wrap_big">
<div class="swiper-container_big">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="data:images/img_01.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="data:images/img_02.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="data:images/img_03.jpg" alt="" />
</div> </div> </div>
</div>

小图切换js

   <!-- photo Swiper -->
<script>
var swiper = new Swiper('.q_banner .swiper-container', {
pagination: '.swiper-container .swiper-pagination',
paginationClickable: true });
</script>

点击小图展示大图并且切换js

$(function(){
$('.q_banner .swiper-slide').each(function(index){
$(this).click(function(){
$('.mask').show();
var thisIndex = index;
$('.wrap_big').show();
$('html,body').css('overflow','hidden');
var swiper = new Swiper('.wrap_big .swiper-container_big', {
paginationClickable: true,
initialSlide:thisIndex
});
});
});
$('.mask').click(function(){
$('.mask').hide();
$('.wrap_big').hide()
});
$('.wrap_big').each(function(index){
$(this).click(function(){
$('html,body').css('overflow','auto');
$(this).hide();
$('.mask').hide(); });
});
});

部分样式

.mask{ width: 100%; height: 100%; background: rgba(0,0,0,1); position:fixed; top:0; left: 0; z-index: 9998; display: none;}
.wrap_big{ width: 100%; position: fixed; left: 0; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); z-index: 9999; display: none; }
.swiper-container {width: 100%; }
.swiper-wrapper{ width: 100%;}
.swiper-slide { width: 100%; }
.swiper-pagination-bullet-active{ background: red;}
 

测下来整天效果还是很不错了,基本上手机都会支持!

美中不足的地方就是大图不能手动放大与缩放!

有好的处理办法的朋友可以留言告知如何如理,非常感谢

模拟app上商品详情点击图片放大并且可以切换大图的更多相关文章

  1. 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  2. js+jquery+html实现在三种不通的情况下,点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  3. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  4. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  5. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  6. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. layui点击图片放大-多图显示

    layui点击图片放大-多图显示 标签(空格分隔): js HTML // div <div id="photo-list"> <img class=" ...

  8. 检出商品详情中的图片并替换url

    原有的批量导入是按照系统本身的功能导入商品,现在需要用接口将图片上传图片服务器 所以需要将批量导入的商品图片取出来,上传后替换掉原来的url (1)检出详情中的图片,用文件名做key private ...

  9. Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案

    需求场景: 非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品: 只有直接进入商品详情页返回才会弹出推荐商品弹窗: 每个用户访问只能弹一次(除非清除缓存). 需求分析: 1. ...

随机推荐

  1. Java-----instanceof、isInstance、isAssignableFrom

    转载自:http://blog.csdn.net/hekewangzi/article/details/51956170

  2. java基础之 第一步 :jdk安装配置

    Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境. window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.ora ...

  3. stack 集合栈计算机 (摘)

    有一个专门为了集合运算而设计的“集合栈”计算机.该机器有一个初始为空的栈,并且支持以下操作:PUSH:空集“{}”入栈DUP:把当前栈顶元素复制一份后再入栈UNION:出栈两个集合,然后把两者的并集入 ...

  4. python学习笔记:python字符串

    二.python字符串操作符 1. 对象标准类型操作符 Python对象的标准类型操作符一共就三种:对象值的比较.对象身份的比较.布尔类型.其中对象值的比较主要是大于.小于.不等于等的数学比较符:对象 ...

  5. css 兼容小三角

    <!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...

  6. jquery 鼠标右键事件、左键单击事件判定

    $(function(){ $('a').mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 retu ...

  7. microwindows Win32 API demo

    初次使用microwindows,资料有限,我也是费了很多功夫才明白.所以记录下来,好帮助那些爱学习的童鞋,另外请大虾们多多指教. 什么是microwindows,什么作用,等背景介绍我就不多说了,因 ...

  8. [转]Linux下转换字符集(UTF8转换)

    今天在Linux 下使用 Iconv 命令转换一个UTF8文件时,总是转换不成功.提示: iconv: 未知 0 处的非法输入序列 后来使用 man iconv 查看,还是没发现异常,因为命令格式都是 ...

  9. MYSQL 提取时间中的信息的 4 方法

    方法 1. year(),month(),day() 方法 2. dayofweek(),dayofmonth(),dayofyear(); 方法 3. hour(),minute(),second( ...

  10. 无意发现vim里插入模式可以借助Alt键输入一些特殊字符

    无意发现vim里插入模式可以借助Alt键输入一些特殊字符.如: Alt+w: ÷ Alt+:: » Alt+f  :  æ Alt+ . :  ® Alt+ ? :  ¯...