我从教程中获取了这段代码,在 javascript/jQuery 中制作了一个自动推进的幻灯片,它在 jsfiddle 中运行得非常好。但是,当我将所有内容都带入 Dreamweaver 时,它似乎就停止了工作。一切都在那里,我已经链接了所有相关文件(.js 和 .css)以及 jQuery 库。出于某种原因,尽管它根本不起作用。这是代码。
的HTML
<div class="fadeIn">
<img src="image1.png" height="500" width="800"/>
<img src="image2.png" height="500" width="800"/>
<img src="image3.png" height="500" width="800"/>
<img src="image4.png" height="500" width="800"/>
</div>
CSS
.fadeIn {
position: relative;
width: 800px;
height: 500px;
}
.fadeIn img {
position: absolute;
left:0;
top:0;
}
Javascript/jQuery
$(function(){
$('.fadeIn img:gt(0)').hide();
setInterval(function(){
$('.fadeIn :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadeIn');
}, 3000);
});
这是标题
<script src="SlideShow.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="SlideShow.css">