2014-04-27 51 views
2

我試圖使用jQuery的滑塊..我下載了我的滑塊的循環插件,並將其也包括在我的文件中...即時通訊使用7圖片爲我的滑塊..下面是代碼......請告訴是什麼試圖使滑塊使用jquery

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#hero{width:200px;height:220px;display:block;position:relative;margin:auto;border-style:solid;border-color:grey;} 
#slider{width:200px;height:200px;display:block;position:absolute;} 
#next{display:block;float:right;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;} 
#prev{display:block;float:left;height:30px;width:30px;position:relative;z-index:99;cursor:pointer;} 
</style> 

<script type="text/javascript" src="jquery.cycle.all.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.min.js"></script> 
<script type="text/javascript"> 

$('#slider').cycle({ 

    fx:   'scrollHorz', 
    timeout: 2000, 
    next:  '#next', 
    prev:  '#prev' 

}); 
</script> 
</head> 
<body> 
<div id="hero"> 

<div id="prev"> 
<img src="right.jpg"> 
</div> 

<div id="next"> 
<img src="left.jpg"> 
</div> 

<div id="slider"> 
<div id="1"><img src="1.jpg"></div><br><br> 
<div id="2"><img src="2.jpg"></div><br> 
<div id="3"><img src="3.jpg"></div><br> 
<div id="4"><img src="4.jpg"></div><br> 
<div id="5"><img src="5.jpg"></div><br> 
<div id="6"><img src="6.jpg"></div><br> 
<div id="7"><img src="7.jpg"></div><br> 
</div> 

</div> 


</body> 
</html> 
+1

你得到了什麼錯誤? –

+1

請作出一個JSFiddle示例 –

+0

幻燈片不工作....圖像不移動時,我點擊左側或右側.. – user3579267

回答

1

你有沒有試圖改變插件的位置問題? <script type="text/javascript" src="jquery-2.1.0.min.js"></script>不應該在<script type="text/javascript" src="jquery.cycle.all.js"></script>之前?

+0

它的工作....非常感謝 – user3579267

+0

@ user3579267如果這個答案解決了你的問題,你應該點擊接受。 –

+0

JQuery應該在之前(: ** jquery.cycle.all.js **取決於** jquery-2.1.0.min.js **,否則不會。 – rafaeldefazio