JavaScript图像滑块不工作

它只停留在一张图像上，不推进幻灯片。我已经检查了其他有相同代码的帖子，我没有发现任何差异。我需要它是一个单一的html，因为我正在使用Wordpress这个

以下是我的html代码：

<style>
#slideshow { 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}
#slideshow > div {  
    position: absolute;
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
</style>

<div id="slideshow">
<div>
<a href="http://www.slideshare.net/billbayer/sell-or-die-the-sales-imperative">
<img src="http://www.billbayer.net/wp-content/uploads/2013/08/sell.png" width="100%" height="100%">
</a>
</div>
<div>
<a href="http://www.slideshare.net/billbayer/bill-bayer-2013-economic-forecast">
<img src="http://www.billbayer.net/wp-content/uploads/2013/08/economic.png" width="100%" height="100%">
</a>
</div>
<div>
<a href="http://www.slideshare.net/billbayer/lgr-fatal-illusions-april-2009">
<img src="http://www.billbayer.net/wp-content/uploads/2013/08/fatal.png" width="100%" height="100%">
</a>
</div>
<div>
<a href="http://www.slideshare.net/billbayer/mastering-change-march-21-2013">
<img src="http://www.billbayer.net/wp-content/uploads/2013/08/mastering.png" width="100%" height="100%">
</a>
</div>
</div>

<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);
</script>

#幻灯片放映{
位置：相对位置；
宽度：240px；
高度：240px；
填充：10px；
盒影：0.20px rgba（0,0,0,0.4）；
}
#幻灯片>div{
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
}
$（“#幻灯片>div:gt（0）”）.hide（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（1000）
.next（）
法丹先生（1000）
(完)
.appendTo（“#幻灯片”）；
},  3000);

---

您没有在小提琴中添加

javascript

代码

您的代码工作正常

---

是的，我的问题是，如何使它在html文档中工作？我需要更改我的脚本头吗？好吧，你想要的东西在JSFIDLE中不起作用。它有单独的css、js和html部分。将

style

和

script

标记保留在

head

标记中。并将js代码保存在

document.ready

函数中。它会起作用的。我的目标是在一个站点中使用它，这样上面的html代码将被复制/粘贴到一个html页面中，JSFIDLE只是一种显示和测试它的方法。如果我将上面的代码保存在一个.htm文件中，javascript将无法工作。我还在脚本部分添加了document.ready包装器，但仍然没有成功。这是它将要结束的页面：