javascript - 如何使这个 slider 工作？

Question

我正在努力提高我的网络编程技能。现在，我正在尝试制作自动图片 slider 。我正在尝试从网站上申请一个，但不幸的是它不起作用:

JS代码

$("#home_pic > div:gt(0)").hide();

setInterval(function() { 
  $('#home_pic > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#home_pic');
},  3000);

CSS 代码

#home_pic img {
    width: 100%;
    height: 330px;
    border-bottom: 3px solid #7C7063;
}

HTML代码

<div id="home_pic">
            <div><img src="pic0.png"></div>
            <div><img src="pic1.png"></div>
        </div> <!--end of home_pic-->

问题

好吧，图片似乎变了，但它们一张一张地显示在另一张下方。 descpription problem

Answer 1

DOM 准备就绪后，您需要应用 javascript。

$(document).ready(function() {
    setInterval(function() { 
        $('#home_pic > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#home_pic');
    },  3000);
});

看这个:Fiddle