2013-03-04 116 views
0

它應該是簡單的圖像滑塊... 爲什麼,o爲什麼這不起作用?我跟着一些教程「來信」,但它是YouTube上的視頻教程,所以我沒有他們的工作代碼在某些網站進行比較,但儘管如此,通過他們的指導和我周知識,我找不到錯誤.. 。JQuery圖像滑塊不工作...我做了什麼錯了?

<html> 
<head> 
<title>JQuery test</title> 
<style type="text/css"> 
.slider { 
width:500px; 
height:250px; 
overflow:hidden; 
margin:30px auto; 
background-image:url(img/loading.gif); 
background-repeat:no-repeat; 
background-position:center; 
} 
.slider img { 
width:800px; 
height:350px; 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
function Slider(){ 
$(".slider#img1").show("fade",500); 
$(".slider#img1").delay(5500).hide("slide",{direction:'left'},500); 

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

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

    if(count==sc){ 
    count=1; 
    } else { 
    count=count+1; 
}, 6500); 
} 
} 
</script> 
</head> 
<body onload="Slider()"> 

<div class="slider"> 
<img id="img1" src="img/1.jpg" /> 
<img id="img2" src="img/2.jpg" /> 
<img id="img3" src="img/3.jpg" /> 
</div> 


</body> 
</html> 
+0

你得到任何錯誤? – bipen 2013-03-04 06:39:12

+0

不,它不會工作...... W3 Validator通過「doctype和alt missing」錯誤巫婆是無關緊要的。 – 2013-03-04 06:42:38

+0

更新:當我嘗試加載腳本時,Opera蜻蜓返回「Undefined variable:Slider」... – 2013-03-04 06:44:38

回答

1

您弄丟您}支架elsesetInterval

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

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

    if(count==sc){ 
     count=1; 
    } else { 
     count=count+1; 
    } 
    }, 6500); //<---here 
}