jQuery自动幻灯片答案

【问题标题】：JQuery automatic slideshowjQuery自动幻灯片
【发布时间】：2016-03-12 19:34:43
【问题描述】：

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

这就是我所做的：

在我的头标签中添加了这些行用于上传 jquery 和 jquery UI 库：

<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>

你有什么建议吗？

【问题讨论】：

编辑：肯定是 img 标签的淡出和淡入效果不好，因为当我简单地尝试时： $(".active").fadeOut("slow");它没有过渡就消失了

标签： javascript jquery html image slideshow

【解决方案1】：

问题解决了，是我的html结构不对

【讨论】：