Question

我再次制作了幻灯片，但是，就像前一张幻灯片一样，它似乎不起作用。有人可以解释一下原因吗？我没有做一个小提琴，因为它似乎在小提琴上工作但不在我的电脑上。

HTML

<html> 
<title>Simple slideshow</title>
<head>Hot Air Balloons All Over The World
<link rel="stylesheet" type="text/css" href="fadein.css">
<script src="slide.js" type="text/javascript"></script>
</head>
<body>
<div id="slideshow">
        <img src="HA balloon.jpg" width="600px" height="400px" title="Image credit:">
        <img src="HA balloons.jpg" width="600px" height="400px">
        <img src="HA balloon1.jpg" width="600px" height="400px">
        <img src="HA balloon2.jpg" width="600px" height="400px">
        <img src="HA.jpg" width="600px" height="400px">
    </div>
</body>
</html>

CSS

#slideshow
{
position: relative;
width: 600px;
height: 400px;
}

#slideshow img
{
position: absolute;
left: 0;
right: 0;
 }

JS

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

Answer 1

您需要在标题中添加jQuery。 JSfiddle包含了jQuery，因此可以在那里工作。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Answer 2

我想你忘记在你的代码中引用jquery了。将其添加到您的head代码

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

你的HTML应该是

<html> 
<title>Simple slideshow</title>
<head>Hot Air Balloons All Over The World
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="fadein.css">
<script src="slide.js" type="text/javascript"></script>
</head>
<body>
<div id="slideshow">
        <img src="HA balloon.jpg" width="600px" height="400px" title="Image credit:">
        <img src="HA balloons.jpg" width="600px" height="400px">
        <img src="HA balloon1.jpg" width="600px" height="400px">
        <img src="HA balloon2.jpg" width="600px" height="400px">
        <img src="HA.jpg" width="600px" height="400px">
    </div>
</body>
</html>

Answer 3

要使代码工作，我必须删除.js文件中的脚本标记。因此，任何使用此代码的人都必须在HMTL文件的标题中引用jquery，你必须像我刚才所说的那样删除标签。

幻灯片显示根本不起作用

3 个答案: