详情页点击其中图片转换成幻灯片图文模式，图片对应文字。

例如原本的详情页是这样的图文列表：

点击其中图片后要实现下列的效果：

不仅要在点击事件中定位到每张图片，还要把这个图片下的与其相关的介绍进行传值，并且显示出来。传递的数据有，所有图片地址，当前点击的图片是第几张，还有简介等。

因为详情页是webview模式实现的，但是幻灯片效果是客户端实现，所以图片的点击事件需要由前端完成并且获取相关属性传递给客户端。

下边贴个简单的图文详情页：

<div class="cont "><p><img class="imgSrcs"  src="img/1.jpg"  alt=""></p><p class="cont-text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p><img class="imgSrcs"  src="img/2.png"  alt=""></p><p class="cont-text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p><img class="imgSrcs"  src="img/3.png"  alt=""></p><p class="cont-text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p style="text-indent: 28px"><img class="imgSrcs"  src="img/4.png"  alt=""></p><p class="cont-text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p><img class="imgSrcs"  src="img/5.png"  alt=""></p><p class="cont-text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p class="cont-text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p><img class="imgSrcs" src="img/6.png"  alt=""></p><p><img class="imgSrcs"  src="img/7.png"  alt=""></p><p class="cont-text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p><p><img class="imgSrcs"  src="img/8.png"  alt=""></p><p class="cont-text">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p></div>

可以看到，图文详情页基本都是图片文字，文字图片，相互交错。所以基本思路是先获取所有不包含img的p标签，在取得其中的文字，将所有文字放入一个数组里面，方便有顺序的进行管理。

然后，在遍历其中所有的img，将遍历的img与数组中的p一一对应。这样图片文字基本可以一一对应，碰到连续两张图片的，没有对应的p，我们传值为空。下面具体实现：

$(function(){var array1=[];//放p的数组var p=$(".cont p");var imgs=$(".cont img");var number=array1.length;for(var i=0;i<p.length;i++){var len =  p.eq(i).children('img').length;if(len==0){// console.log(p.eq(i).text())var n=array1.push(p.eq(i).text());}}$(".cont img").click(function(){var imgSrcs=[];var number=$(this).attr("src");var Obj={};var urls=[];$(".cont img").each(function(){imgSrcs.push($(this).attr('src'));});for(var i=0;i<imgSrcs.length;i++){var single={};single.url=imgSrcs[i];single.des=array1[i];urls.push(single);}Obj.urls=urls;Obj.which=number;var string=JSON.stringify(Obj);// visual.gallery(string);
        console.log(Obj);});
});

看上边的代码，我先定义了一个数组，用来存放所有的p，之后取得所有图片的地址，存入imgSrcs这个数组中，然后定义一个整体的对象，和点击的当前图片的路径。最后组成key-value 形式，方便传递。运行结果为：

其中des：是图片对应的p，就是相关的图片描述。

js当中的visual.gallery(string);是客户端用来调用的方法。

其中string是客户端获取的我的key-value的内容，为了符合客户端方法的要求，才进行转换的。

好了，基本就是这些，看不懂的可以留言，源码就不上传了，没多少东西。

转载于:https://www.cnblogs.com/xiuber/p/5898808.html

详情页点击其中图片转换成幻灯片图文模式，图片对应文字。相关推荐

转把GIF图片转换成单个连续的图片转 tif 等任意多帧图片转换bmp 或者gif等格式...
为什么80%的码农都做不了架构师?>>> 转把GIF图片转换成单个连续的图片转 tif 等任意多帧图片转换bmp 或者gif等格式 using System; using ...
java png 转jpg_怎么用java将png图片转换成jpg格式的图片
png是一种背景透明格式的图片,大量用于网络上,保真性很好,JPG是压缩图片,占用空间少.但有一些失真,所以在将png图片转换成jpg图片之后,肯定是有一些差异的,毕竟这是两种不同的格式. 下面用一个 ...
python将图片转换成动漫_python图片转换成素描和漫画格式的方法
python图片转换成素描和漫画格式的方法发布时间:2020-08-20 09:30:41 来源:亿速云阅读:79 作者:小新小编给大家分享一下python图片转换成素描和漫画格式的方法,相信大 ...
Qt怎么实现将bmp图片转换成Ascii_怎么识别手写文字？迅捷OCR文字识别软件帮你快速完成...
怎么识别手写文字?虽然现在手机.平板等设备已经普及开来,但是从小在学校养成的习惯,还是让大部分人选择会手写的方式.手写其实也有很大的缺陷,无论是在生活中还是在网络上进行分享都比较困难. 那么有没有将手 ...
OpenCV——将针孔相机模型图片转换成鱼眼相机模型图片
一理论基础关于针孔相机模型,参考博客: 关于鱼眼相机模型,参考参考文献[1][2]. 这里只需要知道我们这里使用的鱼眼相机模型是等距投影的鱼眼相机模型,即r=fθ(1),而针孔相机模型是透视投影, ...
python将图片转换成二进制文本_python图片转为二进制文本
python图片转为二进制文本发布时间:2018-11-06 00:05, 浏览次数:487 , 标签: python 写在最前面: 我在研究机器学习的过程中,给的数据集是手写数字图片被处理后的由0 ...
怎么把图片转换成jpg格式？
怎么把图片转换成jpg格式?图片格式的种类比较多,但要说哪种格式使用较早而且使用率最高的,那么肯定是jpg格式,jpg格式图片文件体积小,打开速度快,并且几乎不存在不兼容jpg格式图片的情况.而其它的 ...
HEIC图片转换成其他格式
苹果特有的照片格式.heic,在手机上查看到时候可能还没感觉出来什么,但是当我们将照片放到电脑上的时候可能就会发现没有办法打开照片查看,这个时候该怎么办?有两种方法可以做到,我们一起来看一下怎么做. ...
java图片转换成base64_Java将图片转换成Base64字符串
public classImageUtil {/*** 本地图片转换成base64字符串 *@paramimgFile * 图片本地路径 *@return */ public static Strin ...

详情页点击其中图片转换成幻灯片图文模式，图片对应文字。

详情页点击其中图片转换成幻灯片图文模式，图片对应文字。相关推荐

最新文章

热门文章