有各種各樣的slider
/slideshow
插件,您可以使用它,但如果你想自己做,那麼你可以設置一個導航欄,像你鏈接到的網站,當其中一個數字被點擊,你可以使AJAX調用PHP腳本輸出所需信息:
HTML--
<ul id="navigation">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
<div id="page"></div>
CSS--
#navigation li {
display : inline-block;
/*Fix display:inline-block in IE7*/
*display : inline;
zoom : 1;
}
jQuery--
$(function() {
//cache the `#page` element as it will be needed later
var $page = $('#page');
//bind a `click` event handler to all the `<li>` elements that are children of the `#navigation` ul element
$('#navigation').children().on('click', function (event) {
event.preventDefault();
//you could display a loading animation/message here while the new content is being returned from the server
//when making the AJAX call you need to send some data to identify the "page" to output, I used the `id` key and set it's value to the index of the `<li>` element clicked in respect to all the other `<li>`s
$.get('path/to/server-side.php', { id : $(this).index() }, function (serverResponse) {
//now set the `#page` element's HTML to the response from the server
$page.html(serverResponse);
//if you played a loading animation/message you can hide it now
}
});
});
這裏是一個演示:http://jsfiddle.net/jGujw/(請注意,我不能用AJAX功能測試,所以我存儲在數組中的一些服務器響應)
也可以通過抓取進行分頁AJAX請求中一遍又一遍地重複相同的頁面,並解析serverReponse
以僅將所需的元素附加到DOM中。
請注意,.on()
是jQuery 1.7中的新增功能,如果您使用的是舊版本,則與.bind()
相同。
Thans mate。我對這個詳細的答案感到非常驚喜。我也許問了我的問題太廣泛了,我正在尋找一些指導如何在Wordpress方面做,但這也有幫助,因爲我沒有太多的jQuery經驗(但有更多的使用PHP和WP)。無論如何,我目前的問題是: 我可以使用什麼函數來獲取帖子內單個頁面的內容?假設我想將我的帖子分成5頁 - 我如何獲得第3頁的內容? 我可以在新的...線程/問題中提出這個問題,或者這被認爲是垃圾郵件嗎? – stackhouse 2012-01-01 21:03:48
@stackhouse你可能想標記賈斯珀的問題作爲答案! – 2012-01-24 13:50:37