jquery - MediaWiki Javascript 轮播

Question

我想知道是否可以使用 jqueries 在 MediaWiki 中创建轮播。我目前正在研究 this Wikivoyage 的新主页，我非常希望底部的 3 个横幅(不是世界图像)在指定时间(比如 5 秒)跨越到下一张幻灯片的旋转木马上旋转，但也有按钮。如果可能的话，我希望图片和上面的文字一起旋转，幻灯片之间的某种淡入淡出效果也很好!为了使图像缩放，我不得不做很多 CSS 干预，但这意味着 html(见下文)并不像我希望的那样灵活。我已经尝试过使用 CSS 动画，但没有取得太大的成功，而且它们并不像我希望的那样兼容。老实说，我对 CSS 知之甚少，对 JavaScript 几乎一无所知；如果有人准备真正尝试一下，我将非常非常感激，但也非常欢迎提供建议。谢谢!

相关横幅的 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>
|}

Answer 1

你应该试试这个:

http://www.mediawiki.org/wiki/Extension:SmoothGallery

我还没有尝试过，但在我看来你的 wiki 标记最终应该比你现在拥有的要简单得多:)

干杯， 本杰明.-