javascript - 图像 slider 未出现

Question

我已尝试按照本教程创建图像 slider http://www.youtube.com/watch?v=5_P3Auq-U8c .我没有取得任何成功，我正在努力思考 slider 不起作用的原因。多次检查代码后，我无法发现任何错误。

这首先来自网页的头部。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/imageslider.js"></script>

接下来是imageslider.js中可以找到的所有代码:

function Slider() {
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:"left"}, 500);

var sc = $(".slider img").size();
var count = 2;

setInterval(function(){
    $(".slider #" + count).show("slide",{direction:"right"}, 500);
    $(".slider #" + count).delay(5500).hide("slide", {direction:"left"}, 500);

    if(count == sc){
        count = 1;
    }else{
        count = count + 1;
    }
},6500);    
}

在页面主体中，我有以下内容:

<div class="slider">
        <img src="images/image1.jpg" alt="image1" border="0">
        <img src="images/image2.jpg" alt="image2" border="0">
        <img src="images/image3.png" alt="image3" border="0">
        <img src="images/image4.jpg" alt="image4" border="0">
         </div>

负责的 css 相当简单:

.slider{
width:425px;
height:175px;
/*overflow:hidden;*/
margin:30px auto;
background-image:url('../images/loader.gif');
background-repeat:no-repeat;
background-position:center;
}

.slider img{
width: 425px;
height:175px;
display:none;
}

这里的任何指导都会很棒，真的让我摸不着头脑!

Answer 1

我已经使用 MenuCool slider 有一段时间了，它们很棒。定制也非常简单。所以试试看吧，这也是了解更多 JavaScript 的好方法! - MenuCool JavaScript Slider