通過Ajax加載圖片時不會產生滑動效果

我需要從每個部分加載不同的圖像，併爲每個部分使用圖像滑塊。例如：部分標籤：IT - 信息安全 - 週三開發...等等。通過Ajax加載圖片時不會產生滑動效果

然後，當用戶點擊任何部分將顯示與本節相關的圖像滑塊。

所以我用Ajax創建了它。

主頁：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test </title> 
<link rel="stylesheet" type="text/css" href="demo.css" /> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="newscript.js"></script> 
    <link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" /> 
    <script src="themes/2/js-image-slider.js" type="text/javascript"></script> 
    <link href="generic.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="rounded"> 
<img src="img/top_bg.gif" alt="top" /><div id="main" class="container"> 
    <ul id="navigation"> 
    <?php 
     include("samiloxide.php"); 
     $sql=mysql_query(" select * from section "); 

     while($r=mysql_fetch_array($sql)){ 
      echo "<li><a onclick='loadpage($r[id])' >$r[section]</a></li>" ; 
     } 
    ?> 

    <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li> 
    </ul> 

    <div class="clear"></div>   
    <div id="pageContent"> 
    </div> 
...........

JavaScript文件：

var section; 
    function loadpage(section){ 
     var section = section.toString();  
     $.ajax({ 
      type: "POST", 
      url: "get.php", 
      dataType: "script", 
      data: ({section : section}), 
      success: function(html){ 
      $("#pageContent").empty(); 
      $("#pageContent").append(html); 
      } 
     }); 
    } 

-------

get.php文件：

<div id="sliderFrame"> 
     <div id="slider"> 

      <?php 
     include("samiloxide.php"); 
     //if(!$_POST['page']) die("0"); 

     $section = (int)$_POST['section']; 

     $sql=mysql_query(" select * from images where section='$section'"); 


     while($rr=mysql_fetch_array($sql)){ 
      echo " <img src='$rr[image]' alt='text..' />"; 
       } 
      ?> 

     </div> 
.....

滑塊不工作只是加載圖像無滑動的效果！但如果我從瀏覽器調用get.php ...等它的工作??！我的Ajax代碼有什麼問題？

來源

2012-11-17 Ahmad Samilo

滑塊調用函數在哪裏？你剛剛在頁面上添加了腳本（js-image-slider.js）？ – boyd

我用這個滑塊 http://www.menucool.com/javascript-image-slider –

此滑塊腳本似乎不喜歡/支持動態生成的img標籤，而是將映射/綁定到DOMLoad上的滑塊。

當您完成在DOM中插入圖像時，調用imageSlider.reload（）。所以，就你而言，它將在AJAX完整回調中的.html（）調用之後。

來源

2012-11-17 22:30:55

我用這個滑塊插件 http://www.menucool.com/javascript-image-slider –

我知道，我的回答是與它完全相關。實際上，我現在已經打開它的源代碼了:-) 這是編輯：成功：function（html）{（「＃pageContent」）。empty（）; $（「＃pageContent」）。append（html）; imageSlider.reload（）; } P.S：JS代碼很糟糕。我不知道他們如何設法以20美元的價格出售這個產品。 –

通過Ajax加載圖片時不會產生滑動效果

回答

相關問題