Question

我需要从每个部分加载不同的图像，并为每个部分使用图像滑块。

例如：章节标签：IT - 信息安全 - 周三开发......等等。

然后，当用户点击任何部分时，将显示与此部分相关的图像滑块。

所以我用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代码有什么问题？

Answer 1

这个滑块脚本似乎不喜欢/支持动态生成的img标签，而是映射/绑定到DOMLoad上的那些。

完成在DOM中插入图像后，调用imageSlider.reload（）。所以，在你的情况下，它是在AJAX完全回调中的.html（）调用之后。

通过Ajax加载图像时没有获得滑动效果

1 个答案: