JQuery自动幻灯片

时间:2016-03-12 10:37:52

标签: javascript jquery html image slideshow

我正在尝试在我的网页上使用JQuery实现一个简单的自动幻灯片。 我遵循了本教程:https://www.youtube.com/watch?v=r5iPoJZjXnU。但是,似乎我的fadeOut()和fadeIn()函数效果不佳。代码有效但图像之间的过渡太快而且不平滑。

这就是我所做的:

在我的head标签中添加了这些行,用于上传jquery和jquery UI librairies:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

然后,在我的身体标签的末尾我简单地添加:

<script type="text/javascript">
function galerie(){
        var active = $("#slideshow .active");
        var next = (active.next().length > 0) ? active.next() : $("#slideshow img:first");
        active.fadeOut(function(){
            active.removeClass("active");
        });
        next.fadeIn("slow").addClass("active");
    }
</script>

并在我点击我的h1标签时调用此函数:

<h1 onClick="galerie()">Pure</h1>

你有什么建议吗?

1 个答案:

答案 0 :(得分:0)

问题严重,这是我的html结构不正确