Question

我正在尝试在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会在浏览器上创建滚动条。

如果有人能帮助我，那将非常感激。显然我对网络编程比较陌生，并且很想知道为什么这不起作用。谢谢！

Answer 1

您缺少方法hide()的结尾参数：

$(".slider #"+i).delay(2000).hide;
                                 ^^---Here, must be hide()

你也可以将这两行写成一行，如下所示：

$(".slider #"+i).fadeIn(600).delay(2000).hide();

<强>更新
另外，您的以下行：

<body onload="Slider2"();>

应该是这样的：

<body onload="Slider2();">

Answer 2

有关语法问题，请参阅Nelsons答案，但您的逻辑完全错误，您的jquery将立即显示所有图像，您需要在延迟中引入乘数。

你需要延迟乘数的原因是，当你循环遍历for循环中的元素时，它不会为i = 1运行循环，然后在运行i = 2的循环之前等待它完成，相反，它会在几毫秒内运行它们，以便动画一个接一个地运行，你需要延长每个动画的时间。在我编辑的代码中，所有fadeIns都会立即发生，然后在触发fadeOut之前，每个图像都会有不同的延迟。

你似乎在hide（）/ show（）和fadeIn（）/ fadeOut（）之间混淆了： hide（）/ show（）作用于元素显示属性，将其设置为none或block。 fadeIn（）/ fadeOut（）作用于元素不透明度设置，在0和1之间设置动画。你需要选择一件事来改变。

我有类似于你想要在js小提琴上工作的东西：http://jsfiddle.net/9mgu7/1/

抱歉，我搞砸了你的代码，因为js fiddle似乎没有触发onload功能，我需要适合屏幕的图像 - 请注意我所做的事情也不会正常工作，因为我没有考虑到fadin /延迟时间，所以动画中的重叠会随着时间的推移而变得更糟 - 但这对你来说很有用。：

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图像循环不显示任何图像

2 个答案: