如何通过在数组中循环图像来使用jQuery创建幻灯片?

时间:2014-07-21 01:19:55

标签: javascript jquery html api

我是新人,仍在学习,如果你发现任何我应该知道的基本知识,请打电话给我。

首先,这就是我所拥有的:

$(function () {
  $.ajax({
    url: "",
    dataType: 'jsonp',
    success: function (results) {
      var photosArray = new Array();
      var allPix = results.data._included.media;
      for (var i = 0; i < allPix.length; i++) {
        var mediaNumber = allPix[i];
        var photosHtml = "<div>";
        photosHtml += "<img src='{0}'/>".replace("{0}", mediaNumber.photos.largest);
        photosHtml += "</div>";
        photosArray.push(mediaNumber.photos.rectangle);
        $(".images").append(photosHtml);
      }
    }
  });
});

在上面的代码中,我正在访问API调用以获取图像。

其次,我想使用我从该调用获得的图片网址来创建此幻灯片:

http://jsfiddle.net/SxN8g/17/

问题是在幻灯片放映中,所有内容都在数组中,这就是图像的显示方式。如何在我的函数中使用上述解决方案为我的图像创建此幻灯片?

1 个答案:

答案 0 :(得分:0)

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

var mygallery2 = new fadeSlideShow({     wrapperid:“fadeshow2”,//用于存放幻灯片的页面上的空白DIV的ID     尺寸:[978,308],//画廊的宽度/高度(以像素为单位)。应反映维度

of largest image
    imagearray: [

        ["images/1.jpg", "#", "", "","test1"],
        ["images/2.jpg", "#", "", "","test2"],
        ["images/3.jpg", "#", "", "","test3"],
        ["images/4.jpg", "#", "", "","test4"]

    ],
    displaymode: {type:'auto', pause:3000, cycles:10, wraparound:true, randomize:true},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "always",
    togglerid: "fadeshow2toggler"
});

正如您所看到的,这可以运行您可以操作的数组。希望这有帮助。