2013-02-12 65 views
1

我想知道是否可以使用jquery在MediaWiki中創建一個Carousel。我目前正在研究維基導遊的新主頁this,我非常喜歡底部的3個橫幅(不是世界形象)在旋轉木馬上旋轉,在分配的時間跨越到下一張幻燈片(比如5秒),但也有按鈕。如果可能的話,我希望圖片和文字一起旋轉,幻燈片之間的某種淡入淡出效果也會很好!爲了使圖像縮放,我不得不做很多CSS插入操作,但這意味着html(見下文)不像我想要的那樣靈活。我已經嘗試過使用CSS動畫,但沒有取得太大的成功,並且它們不像我想要的那樣兼容。如果我完全誠實,我對CSS幾乎一無所知,對JavaScript幾乎毫無用處;如果有人準備實際去旅行,我會非常感激,但建議也會非常受歡迎。謝謝!有問題的橫幅MediaWiki Javascript Carousel

Wiki標記/ HTML:

<div id="DOTMtext"><div style="position: absolute; z-index: 2; left: 7em; margin-top: -9em; text-align:left;"><span style="color: white;"><span style="font-size: 200%;">'''[[Bali|<span style="color:white;">Bali</span>]]'''</div> 
<div id="DOTMtext"><div style="position: absolute; z-index: 2; left: 7em; margin-top: -6em; text-align:left;"><span style="color: white;"><span style="font-size: 150%;">'''[[Previous Destinations of the month|<span style="color:white;">Destination of the month</span>]]'''</div> 
<div id="DOTMtext"><div style="position: absolute; z-index: 2; left: 7em; margin-top: -3em; text-align:left;"><span style="color: white;"><span style="font-size: 130%;">'''[[Bali|<span style="color:white;">"Stakes a serious claim to be paradise on earth"</span>]]'''</div> 
| width="60em" | 
<div id="DOTM">[[File:BaliBanner5.0.jpg|frameless|1700px|link=Bali|Bali]]</div> 
|- 
|<hr style="height:1pt; visibility:hidden;" /> 
|- 
| style="text-align:right;" | 
<div id="OTBPtext"><div style="position: absolute; z-index: 2; right: 7em; margin-top: -9em; text-align:right;"><span style="color: white;"><span style="font-size: 200%;">'''[[Niamey|<span style="color:white;">Niamey</span>]]'''</div> 
<div id="OTBPtext"><div style="position: absolute; z-index: 2; right: 7em; margin-top: -6em; text-align:right;"><span style="color: white;"><span style="font-size: 150%;">'''[[Previously Off the beaten path|<span style="color:white;">Off the beaten path</span>]]'''</div> 
<div id="OTBPtext"><div style="position: absolute; z-index: 2; right: 7em; margin-top: -3em; text-align:right;"><span style="color: white;"><span style="font-size: 130%;">'''[[Niamey|<span style="color:white;">A lively Sahelian city on <br> the banks of the Niger River</span>]]'''</div> 
| width="60em" | 
<div id="OTBP">[[File:Niameybanner1.jpg|frameless|max-width: 100%|1700px|link=Niamey|Niamey]]</div> 
|- 
|<hr style="height:1pt; visibility:hidden;" /> 
|- 
| style="text-align:left;" | 
<div id="FTTtext"><div style="position: absolute; z-index: 2; left: 7em; margin-top: -9em; text-align:left;"><span style="color: white;"><span style="font-size: 200%;">'''[[Diving the Cape Peninsula and False Bay|<span style="color:white;">Diving the Cape Peninsula and False Bay</span>]]'''</div> 
<div id="FTTtext"><div style="position: absolute; z-index: 2; left: 7em; margin-top: -6em; text-align:left;"><span style="color: white;"><span style="font-size: 150%;">'''[[Previous Featured travel topics|<span style="color:white;">Featured travel topic</span>]]'''</div> 
<div id="FTTtext"><div style="position: absolute; z-index: 2; left: 7em; margin-top: -3em; text-align:left;"><span style="color: white;"><span style="font-size: 130%;">'''[[Diving the Cape Peninsula and False Bay|<span style="color:white;">"The waters support a thriving ecology of cool temperate <br /> marine organisms and they include some of the most awesome <br /> and spectacular encounters possible for a diver"</span>]]'''</div> 
| width="60em" | 
<div id="FTT">[[File:Reef scene at Rocky Bank with fish P9205353.jpg|frameless|1700px|link=Diving the Cape Peninsula and False Bay|Diving the Cape Peninsula and False Bay]]</div> 
|} 

回答