如何使用jquery-ui選項卡製作簡單的幻燈片？

我一直在試圖學習如何使用jquery-ui選項卡製作簡單的幻燈片。到目前爲止，我的Google搜索技巧已經失敗了，而且我對JavaScript仍然很陌生。我已經知道如何使用示例教程來製作jquery-ui選項卡。我只想學習如何製作一個簡單的幻燈片。如果有人在這裏可以幫我製作一個，請幫忙。如何使用jquery-ui選項卡製作簡單的幻燈片？

我希望當頁面加載時自動播放幻燈片，並在鼠標懸停在其上時停止播放。另外，如果可以添加滑動效果，請添加一個。非常感謝你。

下面是已經在的jsfiddle設置一些代碼：
http://jsfiddle.net/TcNJ2/

<!DOCTYPE html> 
<head> 
<link href="style.css" rel="stylesheet" type="text/css" > 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> 

<script> 
$(function() { 
$("#tab").tabs(); 
}); 
</script> 

</head> 

<body> 

<div id="tab"> 

<ul id="btn"> 
    <li><a href="#1">1</a></li> 
    <li><a href="#2">2</a></li> 
    <li><a href="#3">3</a></li> 
    <li><a href="#4">4</a></li> 
    <li><a href="#5">5</a></li> 
</ul> 

<br class="clear"> 

<div id="slides"> 
    <div id="1">Slide 1</div> 
    <div id="2">Slide 2</div> 
    <div id="3">Slide 3</div> 
    <div id="4">Slide 4</div> 
    <div id="5">Slide 5</div> 
</div> 

</div> 

</body>

的CSS是在的jsfiddle鏈接

來源

2013-08-07 lee

檢查此插件..'http：// www.jqwidgets.com/Support/jqxTabs/slideshow/slideshow.htm' –

偉大的插件，但幻燈片不會停止時，將鼠標移到它上面。 – lee

我想你在找什麼是旋轉木馬。

This page包含幾個基於jQuery的輪播項目，特別是this可能適合您的需要。

資源管理器與其他項目呢！

來源

2013-08-07 05:36:50 leesei

如何使用jquery-ui選項卡製作簡單的幻燈片？

回答

相關問題