2

我正在尝试在 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>
4

2 回答 2

3

Prepend 会反转一些东西。

想想 a prepend b prepend c 等：

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

改为使用append。

至于丢失的图像，我的猜测是超过硬编码的 20 个。

尝试：

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

我也可能想设置srcwith DOM 操作，因为如果文件名中有引号（这可能不会发生），它可能无法正确转义。

于 2012-12-27T21:14:34.610 回答
0

您可以尝试这种方法（参见jsbin示例），使用 layerJS和vue.js，我使用来自 flicker 的图像，因为这不需要 api 密钥。

手势动作也很有效，您可以在它们之间进行不同类型的转换。

基本上，您添加一个舞台div 放置一个图层，并在图像之间添加任意数量的帧。

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-16T13:20:23.097 回答