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

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

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

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

由于详情页是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的内容，为了符合客户端方法的要求，才进行转换的。

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