Question

My Html Code for slider

    <div id="slideshow">
   <div>
     <img src="5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="5638093881_a791e4f819_m.jpg">
   </div>

滑块的我的Css代码

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}
    #slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

我的滑块的Jquery代码

$("#slideshow > div:gt(0)").hide();
    setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

这是我的滑块代码无效，请为此提供帮助。

Answer 1

它为我工作。你错过了幻灯片div的结束标记。无论是什么，我的代码都是爱的

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>slider</title>
        <script src="jquery-1.8.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                    $("#slideshow > div:gt(0)").hide();
                            setInterval(function() { 
                          $('#slideshow > div:first')
                            .fadeOut(1000)
                            .next()
                            .fadeIn(1000)
                            .end()
                            .appendTo('#slideshow');
                        },  3000);
            });
        </script>
        <style>
                #slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}
    #slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
        </style>
    </head>
        <body>
            <div id="slideshow">
   <div>
     <img src="123.jpg">
   </div>
   <div>
     <img src="321.jpg">
   </div>
 </div>
        </body>
    </html>

Answer 2

尝试使用文档准备好jquery代码

Html滑块不起作用

2 个答案: