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

Question

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

幻灯片放映不起作用，图像在页面中 loaded/shown 一张接一张，但是当我在 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 创建带有动态图像加载的幻灯片？

Answer 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 slideshows can be automatically initialized simply by adding the classname cycle-slideshow to your slideshow container element.

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

Cycle2 will automatically find and initialize a slideshow for any element that contains this classname. If you do not want this behavior then do not add the cycle-slideshow class to your slideshow and instead initalize the slideshow programmatically by invoking the cycle method on the slideshow container element:

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

Auto-initialization is not supported for slideshows that are added to the DOM after jQuery's ready event has fired. In this case you will need to programatically initialize your slideshow by invoking the cycle method as shown above. You do not need to qualify your selector to the part of the DOM that has been updated as Cycle2 will not re-initialize a running slideshow if you invoke cycle on it more than once. So it is perfectly safe to run the code above multiple times without having to worry about slideshows that are already running.

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

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

Jquery Cycle2 slideshow - load images from server, ASP .NET

javascript

asp.net

jquery

slideshow

jquery-cycle2