Question

我尝试按照本教程http://www.youtube.com/watch?v=5_P3Auq-U8c创建一个图像滑块。我没有取得任何成功，我正在努力思考滑块无法工作的原因。经过几次代码我无法发现任何错误。

这首先来自网页的负责人。

<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

如果您正在寻找一个简单的滑块，那么您可以查看Simple Slider

Answer 2

我已经使用了一段时间的MenuCool滑块，它们很棒。定制也非常简单。所以给他们一个去，也是了解更多关于JavaScript的好方法！ - MenuCool JavaScript Slider

图像滑块不会出现

2 个答案: