如何使这个滑块工作？

Question

我正在努力发展我的网络编程技巧。现在，我正在尝试制作自动图片滑块。我试图从网站申请一个，但不幸的是它不起作用：

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

Answer 2

结帐this fiddle。我已经改变了你的代码：

<强> JS

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

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

<强> HTML

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="home_pic">
    <img id="1" src="http://image.sportsmansguide.com/adimgs/l/1/145827_ts.jpg"> 
    <img src="http://images.clipartpanda.com/net-clipart-FISHING_NET.jpg">
</div> <!--end of home_pic-->

<强> CSS

#home_pic img {
    position:absolute;/* this is for the images to be overlayered for info search about position:absolute */
    width: 50px;
    height: 50px;
    border: 3px solid #7C7063;
}