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
……
}}

@@ 第7行： / 第7行： @@
 .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:8px;z-index:10}
+.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:10px;height:10px;background:rgba(255,255,255,.5);border-radius:50%;cursor:pointer;transition:.3s}
+.dot{width:25px;height:6px;background:rgba(255,255,255,.4);border-radius:3px;cursor:pointer;transition:.3s}
-.dot.active{background:#fff;transform:scale(1.2)}
+.dot.active{background:#fff;width:38px}
 </style>
 <div class="w-c" id="carousel" data-t="<!--{$thumb}-->">
@@ 第36行： / 第36行： @@
 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);
+d.onmouseenter=(function(idx){return function(){gs(idx)}})(i);dc.appendChild(d);
 }
 })();
@@ 第58行： / 第58行： @@
 c.onmouseleave=function(){t=setInterval(function(){mv(1)},5000)};
 </script>
-</includeonly>
+</includeonly><noinclude>{{doc|content=
-<noinclude>{{doc|content=
 用于[[首页/活动轮换图]]的微件,最多支持9图轮播。
 ==用法==