Widget:Carousel：修订间差异
来自OGAS数据中枢
更多操作
无编辑摘要 标签：已被回退 |
标签：撤销 |
||
| 第1行： | 第1行： | ||
<includeonly> | <includeonly> | ||
<style> | <style> | ||
.w-c{position:relative;width:<!--{$width|default:'100%'}-->;height:<!--{$height|default:'400px'}-->;overflow:hidden;background:#000} | .w-c{position:relative;width:<!--{$width|default:'100%'}-->;height:<!--{$height|default:'400px'}-->;overflow:hidden;background:#000;} | ||
.w-s{display:none;width:100%;height:100%}.w-s.active{display:block} | |||
.w-s{display: | .w-s a,.w-s img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:none} | ||
.w-s img{object-fit:cover;object-position:center;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} | .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:8px;z-index:10} | ||
| 第10行： | 第9行： | ||
.dot.active{background:#fff;transform:scale(1.2)} | .dot.active{background:#fff;transform:scale(1.2)} | ||
</style> | </style> | ||
<div class="w-c" id="carousel" data-w="<!--{$width|default:'100%'}-->" data-t="<!--{$thumb}-->"> | <div class="w-c" id="carousel" data-w="<!--{$width|default:'100%'}-->" data-t="<!--{$thumb|default:'1000'}-->"> | ||
<button class="c-n n-p" onclick="mv(-1)">❮</button> | <button class="c-n n-p" onclick="mv(-1)">❮</button> | ||
<button class="c-n n-n" onclick="mv(1)">❯</button> | <button class="c-n n-n" onclick="mv(1)">❯</button> | ||
| 第28行： | 第27行： | ||
<script> | <script> | ||
(function(){ | (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'); | ||
var tw=parseInt(c.dataset.t)||1000; | |||
for(var i=0;i<is.length;i++){ | for(var i=0;i<is.length;i++){ | ||
is[i].src=b+'Special:FilePath/'+encodeURIComponent(is[i].dataset.f.trim())+'?width='+tw; | is[i].src=b+'Special:FilePath/'+encodeURIComponent(is[i].dataset.f.trim())+'?width='+tw; | ||
| 第51行： | 第51行： | ||
} | } | ||
var t=setInterval(function(){mv(1)},5000); | var t=setInterval(function(){mv(1)},5000); | ||
document.getElementById('carousel').onmouseenter=function(){clearInterval(t)}; | |||
document.getElementById('carousel').onmouseleave=function(){t=setInterval(function(){mv(1)},5000)}; | |||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
<noinclude>{{doc|content= | |||
用于[[首页/活动轮换图]]的微件,最多支持9图轮播。 | |||
==用法== | |||
<pre> | |||
{{#widget:Carousel | |||
|width=800px | |||
|height=300px | |||
|img1=图1.jpg |link1=页面1 | |||
|img2=图2.jpg |link2=页面2 | |||
…… | |||
}} | |||
</pre> | |||
}}</noinclude> | |||
