jQuery幻燈片中未顯示的圖像

我使用HTML，php和jQuery創建幻燈片放映圖像，但圖像未顯示。我不知道錯誤是什麼。我是jQuery的新手，我知道必須有一些小錯誤，但我不知道在哪裏搜索和找到它。jQuery幻燈片中未顯示的圖像

的index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JQuery Slider</title> 

<style type="text/css"> 
.slider{ 
    width:800px; 
    height:350px; 
    overflow:hidden; 
    margin:30px auto; 

} 
.slider img{ 
width:800px; 
height:350px; 
display:none; 
} 

</style> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
function Slider(){ 
$(".slider#1").show("fade",500); 

} 

</script> 
</head> 

<body onload="Slider();"> 
    <div class="slider"> 
    <img id="1" src="img/13052012438.jpg"border="0"alt="image1" /> 
    <img id="2" src="img/25052012442.jpg"border="0"alt="image2" /> 

    <img id="3" src="img/13052012439.jpg"border="0"alt="image3" /> 
    <img id="4" src="img/25052012441.jpg"border="0"alt="image4" /> 
    </div> 
</body> 
</html>

來源

2013-02-22 dev leb

您應該添加的選擇之間的空格字符，你是選擇具有一流的slider和1 ID的元素。

$(".slider #1").show("fade",500); 
     ---^

由於ID都是唯一的，你可以使用ID選擇器中選擇元素：

$('#1')...

還要注意的是數字ID僅在HTML5文檔是有效的。我建議你使用像nivoSlider或Flexslider這樣的幻燈片插件。

來源

2013-02-22 22:22:41 undefined

你的意思是在選擇器之間加入空格？ – 2013-02-22 22:29:46

@ user2097286 jQuery選擇器像CSS選擇器一樣工作！ – undefined 2013-02-22 22:30:48

annn確定爲我工作，謝謝你 – 2013-02-22 22:34:06

你爲什麼不使用已經由jQuery開發團隊創建了滑蓋的？

http://jqueryui.com/slider/

來源

2013-02-22 22:22:31 RandomUs1r

首先，我希望圖像自己滑動第二我不知道如何使圖像相關的滑塊，你談我。 – 2013-02-22 22:26:26

如果您閱讀了文檔，您會發現自己可以使圖像滑動，但聽起來並不像您對此解決方案持開放態度，所以我不會浪費時間。 – RandomUs1r 2013-02-22 22:46:45

jQuery幻燈片中未顯示的圖像

回答

相關問題