詳情頁點擊其中圖片轉換成幻燈片圖文模式，圖片對應文字。

時間 2019-11-26

標籤詳情點擊其中圖片轉換幻燈片圖文模式對應文字简体版

原文原文鏈接

例如本來的詳情頁是這樣的圖文列表：前端

點擊其中圖片後要實現下列的效果：web

不只要在點擊事件中定位到每張圖片，還要把這個圖片下的與其相關的介紹進行傳值，而且顯示出來。傳遞的數據有，全部圖片地址，當前點擊的圖片是第幾張，還有簡介等。數組

由於詳情頁是webview模式實現的，可是幻燈片效果是客戶端實現，因此圖片的點擊事件須要由前端完成而且獲取相關屬性傳遞給客戶端。this

下邊貼個簡單的圖文詳情頁：url

<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標籤，在取得其中的文字，將全部文字放入一個數組裏面，方便有順序的進行管理。spa

而後，在遍歷其中全部的img，將遍歷的img與數組中的p一一對應。這樣圖片文字基本能夠一一對應，碰到連續兩張圖片的，沒有對應的p，咱們傳值爲空。下面具體實現：code

$(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);
    });
});