在旋转木马滑块中显示照片

我想在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

回答

相关问题