Jquery Cycle2 幻灯片 - 从服务器、ASP .NET 加载图像答案

【问题标题】：Jquery Cycle2 slideshow - load images from server, ASP .NETJquery Cycle2 幻灯片 - 从服务器、ASP .NET 加载图像
【发布时间】：2015-01-22 03:22:08
【问题描述】：

我正在尝试将 Cycle2 幻灯片插件与 ASP .NET 一起使用。图片是从服务器动态加载的。

幻灯片不起作用，图像在页面中一个接一个地加载/显示，但是当我在 chrome 检查元素中检查页面 html 时，html 看起来很好。

我只是不知道如何将图像从服务器端（动态）加载到幻灯片中。

这是我的 HTML 代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $("#imageUrls").load("LoadImages.aspx", function() {
        $('.cycle-slideshow').cycle();
      });
    })
  </script>

</head>

<body>
  <div id="imageUrls" class="cycle-slideshow"></div>
</body>

</html>

这是服务器响应

<img src="http://example.com/images/1.jpg">
<img src="http://example.com/images/1.jpg">

这是它在 chrome 检查元素中的外观，当我在浏览器中运行此代码时工作正常。

<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>

<body>
  <div class="cycle-slideshow">
    <img src="http://example.com/images/1.jpg">
    <img src="http://example.com/images/2.jpg">
  </div>
</body>

</html>

如何使用 ASP .NET 创建带有动态图像加载的幻灯片？

【问题讨论】：

标签： javascript jquery asp.net slideshow jquery-cycle2

【解决方案1】：

终于找到错误了。更正了代码。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $("#imageUrls").load("ImageLoad.aspx", function() {
        $('#imageUrls').cycle();
      });
    })
  </script>

</head>

<body>
  <div id="imageUrls"></div>
</body>

</html>

不应使用自动初始化幻灯片放映的 class="cycle-slideshow"。

Cycle2 幻灯片可以自动初始化，只需添加类名循环幻灯片到您的幻灯片容器元素。

<div class="cycle-slideshow" ...

Cycle2 会自动找到并为包含该类名的任何元素初始化幻灯片。如果您不想要这种行为，请不要添加循环幻灯片类到您的幻灯片，而不是初始化幻灯片通过调用幻灯片上的循环方法以编程方式容器元素：

$('.mySlideshows').cycle();

不支持自动初始化在 jQuery 的 ready 事件之后添加到 DOM 的幻灯片被解雇了。在这种情况下，您需要以编程方式初始化您的通过调用循环方法进行幻灯片放映，如上所示。你不需要将您的选择器限定为已更新的 DOM 部分因为如果您调用 Cycle2 将不会重新初始化正在运行的幻灯片循环不止一次。所以运行代码是完全安全的以上多次，而不必担心幻灯片已经在运行了。

http://jquery.malsup.com/cycle2/api/

【讨论】：