Question

我想让我的幻灯片显示工作。第一张图片是fadein和fadeout，但之后所有其他图片都不会显示出来。我正在使用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>

Answer 1

您可以使用名为Flexslider的jQuery插件进行幻灯片演示它会更好，更少问题当你准备好解决方案时，不要浪费时间。

Answer 2

你的Slider函数中有一些输入错误，请注意我的评论以查看错误：

function Slider ()
{
    $(".slider #1").fadeIn(500);

    $(".slider #1").delay(3000).hide("slide", {
        direction: "left"
    }, 500);

    var counter = $(".slider img").length; // This should be a property, not a function.
    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); // You were passing the interval time to the end of the else.
}

如何在jquery中创建幻灯片

2 个答案: