Widget:Carousel：修订间差异

2026年5月3日 (日) 18:56的版本

小工具文档 WIDGET DOCUMENTATION [编辑]

这个文档是内联文档。

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

用法

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

@@ 第4行： / 第4行： @@
 #slide-inner,.w-s,.w-s a{width:100%;height:100%;display:block}
 .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}
-/* 主体层：限宽居中 */
 .i{position:relative;width:100%;height:100%;max-width:1000px;margin:0 auto;object-fit:contain;z-index:2;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}
@@ 第18行： / 第16行： @@
 <div id="slide-inner">
 <!--{section name=i start=1 loop=10}-->
-<!--{assign var="img" value="img`$smarty.section.i.index`"}-->
+<!--{assign var="idx" value=$smarty.section.i.index}-->
-<!--{assign var="lnk" value="link`$smarty.section.i.index`"}-->
+<!--{assign var="currImg" value="img`$idx`"}-->
-<!--{if $$img}--><div class="w-s<!--{if $smarty.section.i.index==1}--> active<!--{/if}-->"><a class="l" data-t="<!--{$$lnk}-->"><img class="i-bg" data-f="<!--{$$img}-->"><img class="i" data-f="<!--{$$img}-->" loading="lazy"></a></div><!--{/if}-->
+<!--{assign var="currLnk" value="link`$idx`"}-->
+<!--{if $smarty.template_vars.$currImg}-->
+<div class="w-s<!--{if $idx==1}--> active<!--{/if}-->">
+<a class="l" data-t="<!--{$smarty.template_vars.$currLnk}-->">
+<img class="i-bg" data-f="<!--{$smarty.template_vars.$currImg}-->">
+<img class="i" data-f="<!--{$smarty.template_vars.$currImg}-->" loading="lazy">
+</a>
+</div>
+<!--{/if}-->
 <!--{/section}-->
 </div>
@@ 第31行： / 第37行： @@
 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.onclick=(function(idx){return function(){gs(idx)}})(i);dc.appendChild(d);