1

我想知道是否有可能使用 jqueries 在 MediaWiki 中创建轮播。我目前正在研究这个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>
|}
4

1 回答 1

0

你应该试试这个:

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

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

干杯,本杰明-

于 2013-03-01T20:05:21.073 回答