如何使此滑块工作？

Question

I am trying to develop my web programming skills. Now, I am trying to make auto picture slider. I am trying to apply one, from website but unfortunately it does not work:

JS code

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

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

CSS code

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

HTML code

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

Problem

Well, pictures seems to change but they appear one below another. descpription problem

Answer 1

You need to apply the javascript once the DOM is ready.

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

See this: Fiddle

Answer 2

Check out this fiddle . I have changed your code like this :

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