2014-02-23 203 views
0

我试图按照本教程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; 
} 

这里的任何指导都会非常棒,真正抓住了我的头!

+0

你应该做一个jsfiddle。此外,你已经定义了滑块()函数,但它永远不会被调用。 – MElliott

回答

0

如果你正在寻找一个简单的滑块,那么你可以检查Simple Slider

0

我已经使用MenuCool滑块,而现在,他们是伟大的。也很容易定制。所以给他们一个去,也是一个了解更多关于JavaScript的好方法! - MenuCool JavaScript Slider