Widget:Carousel：修订间差异

2026年5月4日 (一) 10:19的最新版本

小工具文档 WIDGET DOCUMENTATION [编辑]

这个文档是内联文档。

用于首页/活动轮换图的微件,最多支持9图轮播。

用法

{{#widget:Carousel
<!--这两个参数写微件的大小-->
|width=800px
|height=300px
<!--这个参数写图片加载尺寸（px)，默认1000，调用时不加单位-->
|thumb=800
|img1=图1.jpg |link1=页面1
|img2=图2.jpg |link2=页面2
……
}}

@@ 第1行： / 第1行： @@
 <includeonly>
 <style>
-.w-c {position:relative; width:<!--{$width|default:'100%'}-->; height:<!--{$height|default:'400px'}-->; overflow:hidden; background:#222; margin:10px auto;}
+.w-c{position:relative;width:<!--{$width|default:'100%'}-->;aspect-ratio:16/9;max-height:400px;overflow:hidden;background:#000;}
-.w-s {display:none; width:100%; height:100%;}
+#slide-inner,.w-s,.w-s a{width:100%;height:100%;display:block;position:relative;overflow:hidden}
-.w-s img {width:100%; height:100%; object-fit:cover;}
+.w-s{display:none}.w-s.active{display:block}
-.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}
-.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;}
+.i{position:relative;width:100%;height:100%;max-width:800px;margin:0 auto;object-fit:cover;z-index:2;display:block;border:none}
-.n-p {left:0;} .n-n {right:0;}
+.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">
+<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>
-<!--{if $img1}--><div class="w-s active"><a class="l" data-t="<!--{$link1}-->"><img class="i" data-f="<!--{$img1}-->"></a></div><!--{/if}-->
+<div id="slide-inner">
-<!--{if $img2}--><div class="w-s"><a class="l" data-t="<!--{$link2}-->"><img class="i" data-f="<!--{$img2}-->"></a></div><!--{/if}-->
+<!--{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 $img3}--><div class="w-s"><a class="l" data-t="<!--{$link3}-->"><img class="i" data-f="<!--{$img3}-->"></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 $img4}--><div class="w-s"><a class="l" data-t="<!--{$link4}-->"><img class="i" data-f="<!--{$img4}-->"></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 b=window.location.href.split('index.php')[0]+'index.php?title=',is=document.querySelectorAll('.i'),ls=document.querySelectorAll('.l');
+var ss=c.querySelectorAll('.w-s');
-for(var i=0;i<is.length;i++){
+for(var i=0;i<ss.length;i++){
-is[i].src=b+'Special:FilePath/'+encodeURIComponent(is[i].dataset.f.trim());
+var imgs=ss[i].querySelectorAll('img'),a=ss[i].querySelector('a');
-if(ls[i].dataset.t)ls[i].href=b+encodeURIComponent(ls[i].dataset.t.trim());
+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=document.querySelectorAll('.w-s'),a=0;
+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;s[i].classList.remove('active');break;}
+for(var i=0;i<s.length;i++)if(s[i].classList.contains('active')){a=i;break;}
-s[(a+n+s.length)%s.length].classList.add('active');
+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);
 }
-setInterval(function(){mv(1)},5000);
+var t=setInterval(function(){mv(1)},5000);
+c.onmouseenter=function(){clearInterval(t)};
+c.onmouseleave=function(){t=setInterval(function(){mv(1)},5000)};
 </script>
-</includeonly>
+</includeonly><noinclude>{{doc|content=
-<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>