Question

我试图在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>

Answer 1

Prepend将会扭转局面。

考虑前置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，因为如果文件名中有引号（可能不会发生），它可能无法正确转义。 / p>

Answer 2

你可以尝试这种方法（参见jsbin示例），使用layerJS和vue.js，我使用闪烁的图像，因为这不需要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开源库。

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

2 个答案: