Question

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

幻灯片不起作用，图片在页面中一个接一个地加载/显示，但是当我在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 inspect元素中的外观，并且在我在浏览器中运行此代码时工作正常。

<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

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

＆＃13;

<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>

＆＃13;

不应该使用class =＆＃34; cycle-slideshow＆＃34;它会自动初始化幻灯片。

可以通过添加自动初始化Cycle2幻灯片 classname循环幻灯片显示到幻灯片容器元素。

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

Cycle2将自动查找和初始化包含此类名的任何元素的幻灯片。如果您不想要此行为，则不要添加循环幻灯片您幻灯片放映的类，而不是幻灯片放映通过在幻灯片上调用循环方法以编程方式容器元素：

$（＆＃39; .mySlideshows＆＃39;）。cycle（）;

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

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

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

1 个答案: