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{ | #slide-inner,.w-s,.w-s a,.w-s img{width:100%;height:100%;display:block} | ||
.w-s{display:none}.w-s.active{display:block} | |||
.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} | ||
| 第9行： | 第10行： | ||
.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}-->"> | ||
<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> | ||
| 第27行： | 第28行： | ||
<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'),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); | ||
c.onmouseenter=function(){clearInterval(t)}; | |||
c.onmouseleave=function(){t=setInterval(function(){mv(1)},5000)}; | |||
</script> | </script> | ||
</includeonly> | </includeonly> | ||