2

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

如果有人可以帮助我，那将不胜感激。显然，我对 Web 编程比较陌生，并且希望能深入了解为什么这不起作用。谢谢！

4

2 回答 2

0

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

您在延迟中需要乘数的原因是，当您遍历 for 循环中的元素时，它不会运行 i=1 的循环，然后等待它完成，然后再运行 i=2 的循环，而是运行它们都在几毫秒内，为了让动画一个接一个地运行，您需要将每个动画延迟更长的时间。在我编辑的代码中，所有的淡入淡出同时发生，然后在触发淡入淡出之前每个图像都有不同的延迟。

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

我有一些你想要在 js fiddle 上工作的东西：http: //jsfiddle.net/9mgu7/1/

抱歉，我弄乱了您的代码，因为 js fiddle 似乎没有触发 onload 功能，并且我需要适合屏幕的图像 - 另外请注意，我所做的也无法正常工作，因为我没有考虑淡入/淡出时间在我的延迟中，动画中存在重叠，随着时间的推移会变得更糟 - 但那是你可以玩的东西。：

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);        
    }
});
于 2012-12-02T23:33:32.000 回答
0

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

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

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

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

更新：
另外，您的以下行：

<body onload="Slider2"();>

应该是这样的：

<body onload="Slider2();">
于 2012-12-02T23:02:04.403 回答