jQuery图像循环不显示任何图像

时间:2012-12-02 22:57:50

标签: jquery html web

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

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

2 个答案:

答案 0 :(得分:0)

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

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

你也可以将这两行写成一行,如下所示:

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

<强>更新
另外,您的以下行:

<body onload="Slider2"();>

应该是这样的:

<body onload="Slider2();">

答案 1 :(得分:0)

有关语法问题,请参阅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);        
    }
});