0

我正在尝试使用此链接中的图像滑块http://www.menucool.com/javascript-image-slider

我创建了一个 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 获取数据。这是 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'));
 }});}

图片滑块位于 pages/home.html..这里是代码

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

当我尝试在浏览器上运行它时，导航工作正常，但图像滑块却不行。当我导航到其他页面然后返回到滑块所在的页面时，滑块滞后，它只显示加载栏。我错过了什么吗？

4

2 回答 2

1

当内容更新时，您可能必须重新初始化滑块。将其添加到您的 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-07T17:35:45.870 回答
0

可能是您的脚本位于不同的页面上。我真的无法从发布的方式中看出这一点。

也可能是您对 ajax 调用使用了成功，从外观上看，它使用的是 jquery 库。如果您实际上正在使用 jquery 库，则应该使用 .done .fail .then 等。否则，除非您像 @isherwood 所说的那样重新调用 ajax，否则不会调用成功。

于 2013-10-07T17:42:05.457 回答