我正在尝试在 jQuery 中创建一个非常基本的图片库。目标是让 3 个图像按顺序淡入和淡出。因此显示图像 1，淡入图像 2 等。然后整个过程再次循环。
到目前为止，我的 HTML 代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider</title>
<style type="text/css">
.slider{
width: 2848px;
height: 2136px;
overflow: hidden;
margin: 30px auto;
}
.slider img{
width:2848px;
height:2136px;
display:none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="Slider2.js"></script>
</head>
<body onload="Slider2"();>
<div class="slider">
<img id="1" src="31.jpg" border="0" alt="city"/>
<img id="2" src="2vrtigo2.jpg" border="0" alt="roof"/>
<img id="3" src="3.jpg" border="0" alt="sea"/>
</div>
</body>
jQuery 代码如下所示:
function Slider2()
{
var total = $(".slider img").size();
for (i=1; i<=total; i+=1)
{
$(".slider #"+i).fadeIn(600);
$(".slider #"+i).delay(2000).hide;
}}
快速语法说明，我还尝试在 For 循环的最后一个参数中使用 i++。此代码的结果是一个空白的白色页面。我知道正在编译一些 HTML，因为巨大的 2848x2136 div 在浏览器上创建了滚动条。
如果有人能帮助我，那将不胜感激。显然，我对网络编程还比较陌生，希望深入了解为什么这不起作用。谢谢!
最佳答案
请参阅 Nelsons 对语法问题的回答，但您的逻辑也完全错误，您的 jquery 将一次显示所有图像，您需要在延迟中引入一个乘数。
在延迟中需要乘数的原因是，当您遍历 for 循环中的元素时，它不会运行 i=1 的循环，然后等待它完成，然后再运行 i=2 的循环，相反，它会在几毫秒内运行它们，为了让动画一个接一个地运行，您需要将每个动画延迟更长的时间。在我编辑的代码中，所有的 fadeIns 都同时发生，然后在触发 fadeOut 之前每个图像都有不同的延迟。
您似乎混淆了 hide()/show() 和 fadeIn()/fadeOut(): hide()/show() 作用于元素显示属性，将其设置为 none 或 block。 fadeIn()/fadeOut() 作用于元素的不透明度设置，在 0 和 1 之间设置动画。 您需要选择一件事进行更改。
我有一些你想要在 js fiddle 上工作的东西:http://jsfiddle.net/9mgu7/1/
抱歉，我弄乱了你的代码，因为 js fiddle 似乎没有触发 onload 函数，我需要适合屏幕的图像 - 另外请注意，我所做的也不会正常工作，因为我没有考虑 fadin/out 时间在我的延迟中，所以动画中存在重叠，随着时间的推移会变得更糟 - 但那是你可以玩的东西。:
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider</title>
</head>
<body>
<div class="slider">
<img id="img1" src="http://placehold.it/350x150/dddddd" border="0" alt="city"/>
<img id="img2" src="http://placehold.it/350x150/444444" border="0" alt="roof"/>
<img id="img3" src="http://placehold.it/350x150/111111" border="0" alt="sea"/>
</div>
</body>
CSS:
.slider{
width: 350px;
height: 150px;
overflow: hidden;
margin: 30px auto;
display:block;
}
.slider img{
width:350px;
height:150px;
opacity:1;
}
JS:
$(document).ready(function(){
var total = $(".slider img").size();
for (i=1; i<=total; i++)
{
$(".slider #img"+i).fadeIn(600).delay(2000*i).fadeOut(600);
}
});
关于jQuery 图像循环不显示任何图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13674866/