Widget:Carousel：修订间差异

2026年5月3日 (日) 13:54的版本

小工具文档 WIDGET DOCUMENTATION [编辑]

这个文档是内联文档。

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

用法

{{#widget:Carousel
|width=800px
|height=300px
|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;}
+.w-c {position:relative; width:<!--{$width|default:'100%'}-->; height:<!--{$height|default:'400px'}-->; overflow:hidden; background:#222; margin:10px auto;}
 .w-s {display:none; width:100%; height:100%;}
 .w-s img {width:100%; height:100%; object-fit:cover;}
@@ 第7行： / 第7行： @@
 .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:8px; z-index:10;}
+.dot {width:10px; height:10px; background:rgba(255,255,255,.5); border-radius:50%; cursor:pointer; transition:0.3s;}
+.dot.active {background:#fff; transform:scale(1.2);}
 </style>
 <div class="w-c" id="carousel">
-<button class="c-n n-p" onclick="mv(-1)">&#10094;</button>
+    <button class="c-n n-p" onclick="mv(-1)">&#10094;</button>
-<button class="c-n n-n" onclick="mv(1)">&#10095;</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}-->
+    <div id="slide-inner">
-<!--{if $img3}--><div class="w-s"><a class="l" data-t="<!--{$link3}-->"><img class="i" data-f="<!--{$img3}-->"></a></div><!--{/if}-->
+        <!--{if $img1}--><div class="w-s active"><a class="l" data-t="<!--{$link1}-->"><img class="i" data-f="<!--{$img1}-->"></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 $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}-->
+        <!--{if $img5}--><div class="w-s"><a class="l" data-t="<!--{$link5}-->"><img class="i" data-f="<!--{$img5}-->"></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 $img7}--><div class="w-s"><a class="l" data-t="<!--{$link7}-->"><img class="i" data-f="<!--{$img7}-->"></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 $img9}--><div class="w-s"><a class="l" data-t="<!--{$link9}-->"><img class="i" data-f="<!--{$img9}-->"></a></div><!--{/if}-->
+    </div>
+    <div class="c-i" id="dots-ctx"></div>
 </div>
 <script>
 (function(){
-var b = '/wiki/';
+    var b = '/wiki/', container = document.getElementById('carousel');
-var is=document.querySelectorAll('.i'), ls=document.querySelectorAll('.l');
+    var is = container.querySelectorAll('.i'), ls = container.querySelectorAll('.l');
-for(var i=0; i<is.length; i++){
+    var dotsCtx = document.getElementById('dots-ctx');
-    var f = is[i].dataset.f;
-    var t = ls[i].dataset.t;
+    for(var i=0; i<is.length; i++){
-    if(f) is[i].src = b + 'Special:FilePath/' + encodeURIComponent(f.trim());
+        is[i].src = b + 'Special:FilePath/' + encodeURIComponent(is[i].dataset.f.trim());
-    if(t) ls[i].href = b + encodeURIComponent(t.trim());
+        if(ls[i].dataset.t) ls[i].href = b + encodeURIComponent(ls[i].dataset.t.trim());
-}
+        var dot = document.createElement('div');
+        dot.className = 'dot' + (i===0 ? ' active' : '');
+        dot.setAttribute('onclick', 'goSlide('+i+')');
+        dotsCtx.appendChild(dot);
+    }
 })();
 function mv(n){
-     var s=document.querySelectorAll('.w-s'), a=0;
+     var s = document.querySelectorAll('.w-s'), d = document.querySelectorAll('.dot'), a = 0;
-     for(var i=0; i<s.length; i++) if(s[i].classList.contains('active')){a=i;s[i].classList.remove('active');break;}
+    if(s.length <= 1) return;
-     if(s.length > 0) s[(a+n+s.length)%s.length].classList.add('active');
+     for(var i=0; i<s.length; i++) if(s[i].classList.contains('active')){a=i;break;}
+     update(a, (a + n + s.length) % s.length);
 }
-setInterval(function(){mv(1)},5000);
+function goSlide(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;break;}
+    update(a, n);
+}
+function update(oldIdx, newIdx){
+    var s = document.querySelectorAll('.w-s'), d = document.querySelectorAll('.dot');
+    s[oldIdx].classList.remove('active');
+    d[oldIdx].classList.remove('active');
+    s[newIdx].classList.add('active');
+    d[newIdx].classList.add('active');
+}
+var timer = setInterval(function(){mv(1)}, 5000);
+// 鼠标悬停暂停
+document.getElementById('carousel').onmouseenter = function(){clearInterval(timer)};
+document.getElementById('carousel').onmouseleave = function(){timer = setInterval(function(){mv(1)}, 5000)};
 </script>
 </includeonly>
 <noinclude>{{doc|content=
-用于[[首页/活动轮换图]]的微件。
+用于[[首页/活动轮换图]]的微件,最多支持9图轮播。
 ==用法==
 <pre>
@@ 第45行： / 第84行： @@
 |img1=图1.jpg |link1=页面1
 |img2=图2.jpg |link2=页面2
+……
 }}
 </pre>
 }}</noinclude>