【发布时间】：2013-02-12 21:34:13
【问题描述】：
我想知道是否可以使用 jqueries 在 MediaWiki 中创建轮播。我目前正在为 Wikivoyage 开发 this 新主页，我非常希望底部 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>
|}
【问题讨论】：
标签： jquery css loops carousel mediawiki