查看“︁微件:Carousel”︁的源代码

<includeonly>
<style>
.w-c{position:relative;width:<!--{$width|default:'100%'}-->;aspect-ratio:16/9;max-height:400px;overflow:hidden;background:#000;}
#slide-inner,.w-s,.w-s a{width:100%;height:100%;display:block;position:relative;overflow:hidden}
.w-s{display:none}.w-s.active{display:block}
.i-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:blur(20px) brightness(0.6);transform:scale(1.1);z-index:1;pointer-events:none}
.i{position:relative;width:100%;height:100%;max-width:800px;margin:0 auto;object-fit:cover;z-index:2;display:block;border:none}
.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}.c-i{position:absolute;bottom:15px;right:15px;display:flex;gap:6px;z-index:10}
.dot{width:25px;height:6px;background:rgba(255,255,255,.4);border-radius:3px;cursor:pointer;transition:.3s}
.dot.active{background:#fff;width:38px}
</style>
<div class="w-c" id="carousel" data-t="<!--{$thumb}-->">
<button class="c-n n-p" onclick="mv(-1)">&#10094;</button>
<button class="c-n n-n" onclick="mv(1)">&#10095;</button>
<div id="slide-inner">
<!--{if $img1}--><div class="w-s active"><a class="l" data-t="<!--{$link1}-->"><img class="i-bg" data-f="<!--{$img1}-->"><img class="i" data-f="<!--{$img1}-->" loading="lazy"></a></div><!--{/if}-->
<!--{if $img2}--><div class="w-s"><a class="l" data-t="<!--{$link2}-->"><img class="i-bg" data-f="<!--{$img2}-->"><img class="i" data-f="<!--{$img2}-->" loading="lazy"></a></div><!--{/if}-->
<!--{if $img3}--><div class="w-s"><a class="l" data-t="<!--{$link3}-->"><img class="i-bg" data-f="<!--{$img3}-->"><img class="i" data-f="<!--{$img3}-->" loading="lazy"></a></div><!--{/if}-->
<!--{if $img4}--><div class="w-s"><a class="l" data-t="<!--{$link4}-->"><img class="i-bg" data-f="<!--{$img4}-->"><img class="i" data-f="<!--{$img4}-->" loading="lazy"></a></div><!--{/if}-->
<!--{if $img5}--><div class="w-s"><a class="l" data-t="<!--{$link5}-->"><img class="i-bg" data-f="<!--{$img5}-->"><img class="i" data-f="<!--{$img5}-->" loading="lazy"></a></div><!--{/if}-->
<!--{if $img6}--><div class="w-s"><a class="l" data-t="<!--{$link6}-->"><img class="i-bg" data-f="<!--{$img6}-->"><img class="i" data-f="<!--{$img6}-->" loading="lazy"></a></div><!--{/if}-->
<!--{if $img7}--><div class="w-s"><a class="l" data-t="<!--{$link7}-->"><img class="i-bg" data-f="<!--{$img7}-->"><img class="i" data-f="<!--{$img7}-->" loading="lazy"></a></div><!--{/if}-->
<!--{if $img8}--><div class="w-s"><a class="l" data-t="<!--{$link8}-->"><img class="i-bg" data-f="<!--{$img8}-->"><img class="i" data-f="<!--{$img8}-->" loading="lazy"></a></div><!--{/if}-->
<!--{if $img9}--><div class="w-s"><a class="l" data-t="<!--{$link9}-->"><img class="i-bg" data-f="<!--{$img9}-->"><img class="i" data-f="<!--{$img9}-->" loading="lazy"></a></div><!--{/if}-->
</div>
<div class="c-i" id="dots-ctx"></div>
</div>
<script>
var b='/wiki/',c=document.getElementById('carousel'),dc=document.getElementById('dots-ctx'),tw=parseInt(c.dataset.t)||1000;
(function(){
var ss=c.querySelectorAll('.w-s');
for(var i=0;i<ss.length;i++){
var imgs=ss[i].querySelectorAll('img'),a=ss[i].querySelector('a');
imgs.forEach(function(img){img.src=b+'Special:FilePath/'+encodeURIComponent(img.dataset.f.trim())+'?width='+tw;});
if(a.dataset.t)a.href=b+encodeURIComponent(a.dataset.t.trim());
var d=document.createElement('div');d.className='dot'+(i===0?' active':'');
d.onmouseenter=(function(idx){return function(){gs(idx)}})(i);dc.appendChild(d);
}
})();
function up(o,n){
var s=c.querySelectorAll('.w-s'),d=c.querySelectorAll('.dot');
s[o].classList.remove('active');d[o].classList.remove('active');
s[n].classList.add('active');d[n].classList.add('active');
}
function mv(n){
var s=c.querySelectorAll('.w-s'),a=0;if(s.length<=1)return;
for(var i=0;i<s.length;i++)if(s[i].classList.contains('active')){a=i;break;}
up(a,(a+n+s.length)%s.length);
}
function gs(n){
var s=c.querySelectorAll('.w-s'),a=0;
for(var i=0;i<s.length;i++)if(s[i].classList.contains('active')){a=i;break;}
up(a,n);
}
var t=setInterval(function(){mv(1)},5000);
c.onmouseenter=function(){clearInterval(t)};
c.onmouseleave=function(){t=setInterval(function(){mv(1)},5000)};
</script>
</includeonly><noinclude>{{doc|content=
用于[[首页/活动轮换图]]的微件,最多支持9图轮播。
==用法==
<pre>
{{#widget:Carousel
<!--这两个参数写微件的大小-->
|width=800px
|height=300px
<!--这个参数写图片加载尺寸（px)，默认1000，调用时不加单位-->
|thumb=800
|img1=图1.jpg |link1=页面1
|img2=图2.jpg |link2=页面2
……
}}
</pre>
}}</noinclude>