我正在尝试让我的幻灯片放映正常工作。第一张图像淡入淡出，但之后所有其他图像都不会出现。我正在使用 Notepad++ 以防万一你们需要知道这一点。请任何人帮忙解决这个问题。我确定这是一个小错误，我只是找不到它。先谢谢你
<!DOCTYPE html>
<html>
<head>
<title>Rwandan Genocide Gallery</title>
<meta charset="utf-8" />
<link href="images.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Abril+Fatface"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider(){
$(".slider #1").fadeIn(500);
$(".slider #1").delay(3000).hide("slide",{direction:"left"},500);
var counter=$(".slider img").length();
var count=2;
setInterval(function(){
$(".slider #"+count).fadeIn(500);
$(".slider #"+count).delay(3000).hide("slide",{direction:"left"},500);
if(count == counter){
count = 1;
}
else
{
count = count+1;
},4000);
}
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="1" src="images/genocide1.jpg" alt="image number 1"/>
<img id="2" src="images/genocide5.jpg" alt="image number 4"/>
<img id="3" src="images/genocide2.jpg" alt="image number 5"/>
<img id="4" src="images/genocide11.jpg" alt="image number 6"/>
</div>
</body>
</html>
最佳答案
您可以使用名为 Flexslider 的 jQuery 插件用于幻灯片。
它更好，问题更少。
当您有现成的解决方案时，不要浪费时间。
关于jquery - 如何在 jquery 中创建幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23095123/