2015-01-21 41 views
1

我想使用Cycle2 slideshow插件與ASP .NET。 圖像正在從服務器動態加載。Jquery Cycle2幻燈片 - 從服務器,加載圖像.NET .NET

幻燈片放映無法正常工作,圖像在頁面中一個接一個地加載/顯示,但當我檢查chrome inspect元素中的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動態圖像加載?

回答

0

終於找到了錯誤。 更正的代碼。

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

不宜用類= 「循環幻燈片」,它自動初始化幻燈片。

Cycle2幻燈片可以自動初始化,只需將 classname cycle-slideshow添加到您的幻燈片容器元素即可。

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

循環2會自動查找和 初始化幻燈片包含此類名的任何元素。 如果不希望這種行爲,那麼請不要通過調用幻燈片 容器元素在週期方法的週期幻燈片 類添加到您的幻燈片,而是initalize幻燈片 編程:

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

自動初始化不支持被添加到DOM jQuery的ready事件之後 解僱 幻燈片。在這種情況下,您將需要通過調用上面顯示的循環方法以編程方式初始化您的幻燈片。如果您不止一次調用 循環,則不需要 就可以將您的選擇器限定爲已更新的DOM部分 ,因爲Cycle2不會重新初始化正在運行的幻燈片。因此,多次運行代碼 是完全安全的,無需擔心已經運行 的幻燈片。

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