主要使用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. B - 敌兵布阵 线段树的点

    B - 敌兵布阵 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Descriptio ...

  2. M端页面-绝对定位布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  3. python之函数的使用

    备注:本篇文章主要讲一讲函数及集合的一些常用用法: 一.首先先看下,集合(set): 集合的特点:无序.不重复(这点跟字典有点像) <1>,在需要访问集合的时候,由于集合本身是无序的,所以 ...

  4. docker 使用Data Volume 共享文件

    Adding a data volume You can add a data volume to a container using the -v flag with the docker run  ...

  5. emacs使用指南

    上大学的时候使用过几个简单的命令,用上windows后除了dos很少用命令行处理问题.现在MBP在手不用用emacs多可惜啊. 我上午搜索了下资料,都说emacs是神器,但是神不神看个人啦.这东西也不 ...

  6. windows窗口分析,父窗口,子窗口,所有者窗口

    (本文尝试通过一些简单的实验,来分析Windows的窗口机制,并对微软的设计理由进行一定的猜测,需要读者具备C++.Windows编程及MFC经验,还得有一定动手能力.文中可能出现一些术语不统一的现象 ...

  7. vmware配置安装JDK、Tomcat以及项目部署

    1.安装JDK1.7 JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 安 ...

  8. 原生Javascript 省市区下拉列表插件

    每个电商网站中,都会有收件地址管理模块,用户进行地址操作时,最好不要用户手工进行填写地址. 常见的地址管理界面: 实现插件:PCASClass.js 插件下载地址:http://pan.baidu.c ...

  9. 奇妙的算法之LCS妙解

    LCS算法妙解 LCS问题简述:最长公共子序列 一个数列 S,如果分别是两个或多个已知数列的子序列,且是所有符合此条件序列中最长的,则S 称为已知序列的最长公共子序列. LCS问题的分支:最长公共子串 ...

  10. Hadoop CLI MiniCluster

    CLI MiniCluster Use the climonicluster, users can simply start and stop a single-node hadoop cluster ...