照片滑动相同的源代码，但输出不起作用

Question

我有这段代码，刷新了一个ul的内容。

它适用于第一次加载，直接加载 ul 的内容，但我每 10 秒制作一次新内容，以便用户始终可以获得新内容。

javascript调用传递的内容源代码与第一次加载完全相同。然后javascript调用也不起作用

Javascript：

<script type="text/javascript">
    setInterval(function() {
        $("#vbar").load(location.href+" #vbar>*","");
    }, 10000);
</script>

html代码为：

<ul  id="vbar" class="gallery">           
    <li>
        <a href="http://i2.listal.com/image/3550836/600full-taylor-swift.jpg" rel="external">Taylor Swift  </a>
    </li>
    <li>
        <a href="http://i2.listal.com/image/303530/600full-jessica-lange.jpg" rel="external">Jessica Lange  </a>
    </li>
    <li>
        <a href="http://i2.listal.com/image/2844304/600full.jpg" rel="external">  </a>
    </li>
    <li>
        <a href="http://i2.listal.com/image/524086/600full-caroline-ribeiro.jpg" rel="external">Caroline Ribeiro  </a>
    </li>
    <li>
        <a href="http://i2.listal.com/image/2402821/600full-francine-dee.jpg" rel="external">Francine Dee  </a>
    </li>                
</ul>

我试过不缓存并在标题中使用此代码然后也没有用

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

这里是实时代码

    http://www.way2enjoy.com/touch/w2et/newphoto12.php

除此之外，我可以在插入新内容时更改网址

Answer 1

我会使用jQuery ready。

有点像

<script type="text/javascript">
$(document).ready(function(){
    setInterval(function() {
        $("#vbar").load(location.href+" #vbar>*","");
    }, 10000);
});
</script>

但是，@Cletus in his answer 解释了更好的方法。

you linked in the comment section 的示例中有一个轮播，现在的问题是，在轮播中，setTimeout 不会更新轮播

解决方案：

• 创建一个数组来存储所有正在更新的图像。
• 更新轮播中的imgs，在setTimeout中调用轮播

两者都需要看看轮播中的代码是否阻塞了超时的代码。使用 chrome 开发工具检查，甚至是 alert('test'); 应该可以完成这项工作。