简体   繁体   English

JavaScript图像滑块不起作用

[英]JavaScript image slider not working

It just stays on a single image and doesn't advance the slide. 它只是停留在单个图像上,不会使幻灯片前进。 I've checked other posts that have the same code and I can't find any differences. 我检查了其他具有相同代码的帖子,但找不到任何区别。 I need it all to be a single html as I'm using this for Wordpress. 我需要所有这些都成为单个html,因为我正在将其用于Wordpress。

Here is my html code: 这是我的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/ http://jsfiddle.net/Rouse94/j6PSA/

You have not added javascript code in your fiddle. 您尚未在小提琴中添加javascript代码。

Your code works correctly. 您的代码正常工作。

Updated fiddle here. 在这里更新了小提琴。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM