Question

我正在尝试使用此链接中的图片滑块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>

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

Answer 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

Answer 2

可能是您的脚本位于不同的页面上。我无法从发布的方式告诉我。

也可能是你正在使用ajax调用的成功，从它的外观使用jquery库。如果你实际上正在使用jquery库，你应该使用.done .fail .then等。否则，除非你重新调用@isherwood所说的ajax，否则成功将无法被调用。

Image Slider未加载Ajax请求

2 个答案: