Question

我从互联网上找到了一个jquery.slide.js脚本，它非常好，但是我必须修改它以使它成为我想要的。

首先，此脚本在<image>内呈现<div id="slides"></div>个对象，并随之创建幻灯片。

我得到一个ajax数据，其中包含以下代码的文件夹中的图片文件名：

[System.Web.Services.WebMethod]
public static List<string> Pictures()
{
    List<string> result= new List<string>();
    DirectoryInfo files= new DirectoryInfo(HttpContext.Current.Server.MapPath("~/images/"));
    List<FileInfo> file_names = new List<FileInfo>();
    FileInfo[] myfiles;
    myfiles = files.GetFiles("*.jpg"); file_names.AddRange(myfiles);
    foreach (FileInfo file in file_names)
    {
        result.Add(file.Name);
    }
    return result;
}

//

$.ajax({
          type: "POST",
          url: "Default.aspx/Pictures",
          data: "{}",
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          success: function (msg) {
              var indexnum = 0;


              indexnum = 1;
              $.each(msg.d, function (i) {
                  $("<img src='resimler/'" + this + "'></img>").appendTo($(".slidesjs-control"));
                  //THIS .slidejs-control which contains pictures is dynamically created by script, So I am putting my pictures into it
                  //the pictures is firstly put into <div id="slides"> as I mentioned above. Then some divs are appended into "#slides", so the image carrier div becomes ".slidejs-control"
                  indexnum++;
              });
          },
          error: function (msg) { alert("Hata oluştu."); }
      });


//AND IT GOES LIKE THIS TO ADD SOME CLASS TO MY IMAGES WHICH INSIDE .slidejs-control
$(".slidesjs-control", $element).css({
        position: "relative",
        left: 0
      });
      $(".slidesjs-control", $element).children().addClass("slidesjs-slide").css({
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        zIndex: 0,
        display: "none",
        webkitBackfaceVisibility: "hidden"
      });

//这是我原创的未经修改的幻灯片

<div id="slides">
      <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
    </div>

，这是由脚本版本

修改的

         <div class="container">
            <div style="overflow: hidden; display: block;" id="slides">
              <div style="overflow: hidden; position: relative; width: 1170px; height: 657.191px;" class="slidesjs-container"><div style="position: relative; left: 0px; width: 1170px; height: 657.191px;" class="slidesjs-control">
    .
    .
    .
    <img slidesjs-index="0" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0;" class="slidesjs-slide" src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
    .
    .
    .
    .

             </div>
          </div>
    </div>
</div>

＆＃34; .slidejs-control＆＃34; div是由我的$ .ajax代码之前的跟随行创建的。

$(".slidesjs-container", $element).wrapInner("<div class='slidesjs-control'>", $element).children();
  //AJAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

      $.ajax({
          type: "POST",
          url: "Default.aspx/Resimler",
          data: "{}",
          dataType: "json",

问题是，它没有渲染并将我的图像 - 动态创建 - 放入幻灯片放映中。但是当我手动将图像添加到HTML文件中时，它会将它们放入幻灯片放映中。

我在这里需要帮助，可能会导致什么？我看到我在动态添加的图片下面是在开发人员工具中手动添加的图片，但是它们没有被修改并被推入幻灯片放映。

谢谢！

Answer 1

我用以下方式解决了问题：

而不是ajax，我将每个循环从.html文件移动到我的.aspx文件......

但对于那些想要从.html使用它的人来说，问题仍然存在......

Jquery幻灯片。用ajax将一些图像放入其中

1 个答案: