jquery
2012-09-30 101 views 1 likes 
1

我正在嘗試製作圖像幻燈片。我沒有Jquery的經驗,我需要一些幫助。所以基本上我有一個div#幻燈片中的圖像。我想要在那裏放置多個圖像,並使用Jquery的強大功能,當用戶單擊左/右按鈕時,它將變爲下一張圖像。這裏是我的HTML代碼部分 -使用JQuery通過鼠標單擊來更改圖像

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<style> 
body { 
background: url(bg.png); 
width: 999px; 
font-family: 'Open Sans', sans-serif; 
margin: 0 auto; 
} 
p { 
color: #222; 
} 
a { 
color: #777; 
font-size: 14px; 
font-weight: bold; 
text-decoration: none; 
padding: 10px; 
} 
#nav { 
float: right; 
} 
#slideshow { 
width: 999px; 
margin: 100px -50px; 
} 
#content { 
background: #FFF; 
padding: 50px; 
height: 500px; 
border-radius: 1px; 
margin: 50px auto; 
} 
</style> 
</head> 
<body> 
<div id="content"> 
<div id="nav"> 
<a href="..">Home</a> 
<a href="..">About</a> 
<a href="..">Work</a> 
<a href="..">Contact</a> 
</div> 
<div id="slideshow"> 
<img src="image.jpg" /> 
</div> 
</div> 
</body> 
</html> 
+2

那麼你使用一些現有的jQuery插件,如: http://www.slidesjs.com/ –

+0

對於[使用插件](http://www.google.com/search q = jquery的+庫)? –

+0

http://bit.ly/NYEjfY – Fresheyeball

回答

2

查找到SlidesJS的jQuery插件。這裏是示例頁面:http://www.slidesjs.com/#examples

有很多插件可以做到這一點(例如ResponsiveSlides),但這個插件非常簡單,您應該能夠弄清楚。

+0

好吧,謝謝你,我會盡力:) – Jack

相關問題