JavaScript图像滑块不起作用

时间:2013-11-17 06:18:01

标签: javascript html css image slider

它只停留在单个图像上,不会使幻灯片前进。我检查了其他具有相同代码的帖子,但我找不到任何差异。我需要这一切都是一个单独的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>

http://jsfiddle.net/Rouse94/j6PSA/

1 个答案:

答案 0 :(得分:0)

您尚未在小提琴中添加javascript代码。

您的代码正常运行。

Updated fiddle here.