查看“︁Widget:Carousel”︁的源代码

<includeonly>
<style>
.w-c {position:relative; width:100%; height:<!--{$height|default:'400px'}-->; overflow:hidden; background:#222;}
.w-s {display:none; width:100%; height:100%;}
.w-s img {width:100%; height:100%; object-fit:cover;}
.w-s.active {display:block;}
.c-n {position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); color:#fff; padding:15px 10px; cursor:pointer; border:none; z-index:5;}
.n-p {left:0;} .n-n {right:0;}
</style>
<div class="w-c" id="carousel">
<button class="c-n n-p" onclick="mv(-1)">&#10094;</button>
<button class="c-n n-n" onclick="mv(1)">&#10095;</button>
<!--{if $img1}--><div class="w-s active"><a class="l" data-t="<!--{$link1}-->"><img class="i" data-f="<!--{$img1}-->"></a></div><!--{/if}-->
<!--{if $img2}--><div class="w-s"><a class="l" data-t="<!--{$link2}-->"><img class="i" data-f="<!--{$img2}-->"></a></div><!--{/if}-->
<!--{if $img3}--><div class="w-s"><a class="l" data-t="<!--{$link3}-->"><img class="i" data-f="<!--{$img3}-->"></a></div><!--{/if}-->
<!--{if $img4}--><div class="w-s"><a class="l" data-t="<!--{$link4}-->"><img class="i" data-f="<!--{$img4}-->"></a></div><!--{/if}-->
</div>
<script>
(function(){
var b=window.location.href.split('index.php')[0]+'index.php?title=',is=document.querySelectorAll('.i'),ls=document.querySelectorAll('.l');
for(var i=0;i<is.length;i++){
is[i].src=b+'Special:FilePath/'+encodeURIComponent(is[i].dataset.f.trim());
if(ls[i].dataset.t)ls[i].href=b+encodeURIComponent(ls[i].dataset.t.trim());
}
})();
function mv(n){
var s=document.querySelectorAll('.w-s'),a=0;
for(var i=0;i<s.length;i++)if(s[i].classList.contains('active')){a=i;s[i].classList.remove('active');break;}
s[(a+n+s.length)%s.length].classList.add('active');
}
setInterval(function(){mv(1)},5000);
</script>
</includeonly>
<noinclude>{{doc}}</noinclude>