圖像不加載Ajax請求滑塊

我試圖使用圖像滑塊從這個鏈接http://www.menucool.com/javascript-image-slider 圖像不加載Ajax請求滑塊

我創建了一個將用於顯示所有網頁的index.html文件，所以導航只有通過更改<div id="isi">內容。這裏的索引文件

<body class="wg"> 
     <div class="container"> 
      <div class="header"> 
       <h1 class="banner-font">Header</h1> 
      </div> 
      <div class="btn-group button-banner"> 
       <button type="button" class="btn btn-default" onclick="getSummary(1)" 
       >Home</button> 
       <button type="button" class="btn btn-default" onclick="getSummary(5)">Contact Us</button> 

       <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Tentang Kami <span class="caret"></span></button> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#" onclick="getSummary(2)">Sejarah</a></li> 
        <li><a href="#" onclick="getSummary(3)">Visi Misi</a></li> 
        <li><a href="#" onclick="getSummary(4)">Program Studi</a></li> 
       </ul> 


      </div> 
      <div id="isi"> 
        <!-- ini isi nya --> 
      </div> 
      <footer> 
       <b> 
        &copy; 2013 Kurnia Fredy Wijaya & Luki Ramadon <br> 
        Fakultas Teknik Universitas Pancasila 
       </b> 
      </footer> 
     </div> 

     <script type="text/javascript"> 
      $(document).ready(function(){ 
       getSummary(1); 
      }); 
     </script> 
    </body>

在頁面的第一負載，它將執行getSummary（1）方法用ajax..here的Ajax代碼，將獲取數據..

function getSummary(id){ 
if(id==1){ 
    alamat = "pages/home.html"; 
} 
else if(id==2){ 
    alamat = "pages/sejarah.html"; 
} 
$.ajax({ 
type: "GET", 
url: alamat, 
data: "id=" + id, 
success: function(data) { 
     document.getElementById('isi').innerHTML = data; 
     console.log(document.getElementById('isi')); 
}});}

並對圖像的滑塊位於頁/ home.html..here是代碼

 <div class="isiFrame"> 
     <div id="sliderFrame"> 
      <div id="slider"> 
       <a class="lazyImage" href="img/img1.jpg" title=""></a> 
       <a class="lazyImage" href="img/img2.jpg" title=""></a> 
       <a class="lazyImage" href="img/img3.jpg" title=""></a> 
      </div> 
     </div><br /> 
    </div>

當我試圖在瀏覽器中運行它，導航工作正常，但不是圖像滑塊。當我導航到其他頁面，然後回到滑塊處於打開狀態的頁面時，滑塊落後，它只顯示加載欄。我錯過了什麼嗎？

來源

2013-10-07 thekucays

當內容更新時，您可能不得不重新初始化滑塊。它添加到您的ajax成功回調：

... 
success: function(data) { 
     document.getElementById('isi').innerHTML = data; 
     console.log(document.getEimageSlider.reload(); 
     imageSlider.reload(); 
...

http://www.menucool.com/slider/create-image-slider-dynamically

來源

2013-10-07 17:35:45 isherwood

嘿夥計它的工作原理：D，現在滑塊顯示時，我導航回來。但當我導航回去，滑動效果消失了，它只會改變圖像，但沒有效果..我錯過了什麼（再次）？ – thekucays

這可能是因爲你的腳本是一個不同的頁面上。從發佈的方式我無法真正瞭解。

也可能是您正在使用成功爲您的ajax調用，從它的外觀使用jQuery庫。如果你實際上正在使用jQuery庫，你應該使用.done .fail .then等。否則，除非你像@isherwood所說的那樣重新調用ajax，否則不會調用成功。

來源

2013-10-07 17:42:05 RadleyMith

是的，我把劇本放在了不同的頁面上......這會是一個問題嗎？ – thekucays

是的，它可以。被調用的函數將在該頁面本地。 – RadleyMith

圖像不加載Ajax請求滑塊

回答

相關問題