Widget:Carousel：修订间差异

2026年5月3日 (日) 14:08的版本

小工具文档 WIDGET DOCUMENTATION [编辑]

这个文档是内联文档。

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

用法

{{#widget:Carousel
|width=800px
|height=300px
|img1=图1.jpg |link1=页面1
|img2=图2.jpg |link2=页面2
……
}}

@@ 第9行： / 第9行： @@
 .dot.active{background:#fff;transform:scale(1.2)}
 </style>
-<div class="w-c" id="carousel">
+<div class="w-c" id="carousel" data-w="<!--{$width}-->">
 <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" data-f="<!--{$img1}-->"></a></div><!--{/if}-->
+<!--{if $img1}--><div class="w-s active"><a class="l" data-t="<!--{$link1}-->"><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" data-f="<!--{$img2}-->"></a></div><!--{/if}-->
+<!--{if $img2}--><div class="w-s"><a class="l" data-t="<!--{$link2}-->"><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" data-f="<!--{$img3}-->"></a></div><!--{/if}-->
+<!--{if $img3}--><div class="w-s"><a class="l" data-t="<!--{$link3}-->"><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" data-f="<!--{$img4}-->"></a></div><!--{/if}-->
+<!--{if $img4}--><div class="w-s"><a class="l" data-t="<!--{$link4}-->"><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" data-f="<!--{$img5}-->"></a></div><!--{/if}-->
+<!--{if $img5}--><div class="w-s"><a class="l" data-t="<!--{$link5}-->"><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" data-f="<!--{$img6}-->"></a></div><!--{/if}-->
+<!--{if $img6}--><div class="w-s"><a class="l" data-t="<!--{$link6}-->"><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" data-f="<!--{$img7}-->"></a></div><!--{/if}-->
+<!--{if $img7}--><div class="w-s"><a class="l" data-t="<!--{$link7}-->"><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" data-f="<!--{$img8}-->"></a></div><!--{/if}-->
+<!--{if $img8}--><div class="w-s"><a class="l" data-t="<!--{$link8}-->"><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" data-f="<!--{$img9}-->"></a></div><!--{/if}-->
+<!--{if $img9}--><div class="w-s"><a class="l" data-t="<!--{$link9}-->"><img class="i" data-f="<!--{$img9}-->" loading="lazy"></a></div><!--{/if}-->
 </div>
 <div class="c-i" id="dots-ctx"></div>
@@ 第27行： / 第27行： @@
 <script>
 (function(){
-var b='/wiki/',c=document.getElementById('carousel'),is=c.querySelectorAll('.i'),ls=c.querySelectorAll('.l'),dc=document.getElementById('dots-ctx');
+var b='/wiki/',c=document.getElementById('carousel'),is=c.querySelectorAll('.i'),ls=c.querySelectorAll('.l'),dc=document.getElementById('dots-ctx'),pw=parseInt(c.dataset.w)||1000;
 for(var i=0;i<is.length;i++){
-is[i].src=b+'Special:FilePath/'+encodeURIComponent(is[i].dataset.f.trim());
+is[i].src=b+'Special:FilePath/'+encodeURIComponent(is[i].dataset.f.trim())+'?width='+pw;
 if(ls[i].dataset.t)ls[i].href=b+encodeURIComponent(ls[i].dataset.t.trim());
 var d=document.createElement('div');d.className='dot'+(i===0?' active':'');d.onclick=(function(idx){return function(){gs(idx)}})(i);dc.appendChild(d);
@@ 第50行： / 第50行： @@
 }
 var t=setInterval(function(){mv(1)},5000);
-document.getElementById('carousel').onmouseenter=function(){clearInterval(t)};
+c.onmouseenter=function(){clearInterval(t)};
-document.getElementById('carousel').onmouseleave=function(){t=setInterval(function(){mv(1)},5000)};
+c.onmouseleave=function(){t=setInterval(function(){mv(1)},5000)};
 </script>
 </includeonly>