在旋轉木馬滑塊中顯示照片

我想在jquery傳送帶中顯示一些instagram照片，並且由於某種原因圖片顯示順序相反，並且所有照片都不顯示在傳送帶滑塊中。在旋轉木馬滑塊中顯示照片

我使用的JavaScript是如下：

function(data) { 
    for (i=0; i<20; i++){ 
     $("#carousel").prepend("<li><a target='_blank' href='" + data.data[i].link + "'><img src '" + data.data[i].images.thumbnail.url + "'></img></a>"); 
    } 
}

的HTML：

<ul id ="carousel" class="elasticslide-list"> 
<li></li> 
</ul>

來源

2012-12-27 user1933111

前置將扭轉的東西。

想想前面加上b前插c等：

a -> ba -> cba -> dcba -> ...

使用append代替。

至於遺失的圖像，我的猜測是，有超過二十硬編碼。

嘗試：

for (i = 0; i < data.data.length; ++i)

此外，i應某處聲明。希望它在更高的範圍內宣佈，而不是一個隱含的全球性。

這將是一個有點矯枉過正，但如果你願意，你也可以使用jQuery的each：

$.each(data.data, function() { 
    //"this" is now each of the data.data entries. 
    //like this.images or this.link 
});

編輯：它也像你錯過了=你的src屬性上img標籤。

我也可能會試圖設置帶有DOM操作的src，因爲如果在文件名內部有引號（這可能不會發生），它可能不會正確轉義。

來源

2012-12-27 21:14:34 Corbin

謝謝你的回覆。我用了append來解決相反的問題。照片仍然無法正常顯示。我在我的控制檯中看到我從instagram獲取照片，但只有一張照片顯示在我使用此代碼時：$（「$ carousel li」）。append（「」）; – user1933111

我認爲這是整個循環，並使其成爲

中的一個對象。 .each函數能解決這個問題嗎？ – user1933111

@ user1933111我不熟悉你正在使用的不同的JS庫，但我認爲你需要爲每個圖像創建一個'li'。這似乎是你的原始代碼在做什麼。數據的結構是什麼？它在每個'data.data'裏面有多個圖像嗎？如果是這樣，您需要重複縮略圖或其他內容。再次，不知道API /庫如何工作。 – Corbin

你可以試試這個方法（見jsbin例子），使用layerJS和vue.js，我使用閃爍的圖像，因爲這並不需要一個API密鑰。

手勢運動也可以工作，您可以在它們之間進行不同類型的轉換。

基本上你添加一個階段格放一個層，並添加許多幀，只要你想在圖像之間。

的HTML會是這個樣子：

<div data-lj-type="stage"> 
    <div data-lj-type="layer" data-lj-default-frame="image1"> 
     <div data-lj-type="frame" data-lj-name="image1" data-lj-neighbors.b="image2" class="frame"> 
      <image src="img/1.jpg" /> 
     </div> 
     <div data-lj-type="frame" data-lj-name="image2" data-lj-neighbors.b="image3" class="frame"> 
      <image src="img/2.jpg" /> 
     </div> 
    </div> 
</div>

希望這可以幫助你和其他人的未來。

免責聲明：我在這裏使用的layerJS開放源代碼庫工作。

來源

2017-03-16 13:20:23

回答

相關問題