https://cznwiki.com/index.php?action=history&feed=atom&title=Widget%3ACarousel
Widget:Carousel - Revision history
2026-04-17T13:11:56Z
Revision history for this page on the wiki
MediaWiki 1.45.3
https://cznwiki.com/index.php?title=Widget:Carousel&diff=10&oldid=prev
律Rhyme at 08:42, 17 April 2026
2026-04-17T08:42:43Z
<p></p>
<a href="https://cznwiki.com/index.php?title=Widget:Carousel&diff=10&oldid=7">Show changes</a>
律Rhyme
https://cznwiki.com/index.php?title=Widget:Carousel&diff=7&oldid=prev
律Rhyme: Created page with "<div id="carousel-container"></div> <style> /* ===== 轮播容器 ===== */ #carousel-container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; overflow: hidden; border-radius: 8px; background: #1a1a1a; } #carousel-container .carousel-wrapper { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ } #carousel-container .carousel-slide { position: absolute; top: 0; left: 0; width: 10..."
2026-04-17T08:38:53Z
<p>Created page with "<div id="carousel-container"></div> <style> <span class="autocomment">===== 轮播容器 =====: </span> #carousel-container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; overflow: hidden; border-radius: 8px; background: #1a1a1a; } #carousel-container .carousel-wrapper { position: relative; width: 100%; padding-top: 56.25%; <span class="autocomment">16:9: </span> } #carousel-container .carousel-slide { position: absolute; top: 0; left: 0; width: 10..."</p>
<p><b>New page</b></p><div><div id="carousel-container"></div><br />
<br />
<style><br />
/* ===== 轮播容器 ===== */<br />
#carousel-container {<br />
position: relative;<br />
width: 100%;<br />
max-width: 960px;<br />
margin: 0 auto;<br />
overflow: hidden;<br />
border-radius: 8px;<br />
background: #1a1a1a;<br />
}<br />
<br />
#carousel-container .carousel-wrapper {<br />
position: relative;<br />
width: 100%;<br />
padding-top: 56.25%; /* 16:9 */<br />
}<br />
<br />
#carousel-container .carousel-slide {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
opacity: 0;<br />
transition: opacity 0.6s ease-in-out;<br />
cursor: pointer;<br />
display: block;<br />
text-decoration: none;<br />
color: inherit;<br />
}<br />
<br />
#carousel-container .carousel-slide.active {<br />
opacity: 1;<br />
z-index: 1;<br />
}<br />
<br />
#carousel-container .carousel-slide .slide-bg {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background-size: cover;<br />
background-position: center;<br />
background-repeat: no-repeat;<br />
}<br />
<br />
#carousel-container .carousel-slide .slide-overlay {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 100%;<br />
background: linear-gradient(<br />
to top,<br />
rgba(0, 0, 0, 0.85) 0%,<br />
rgba(0, 0, 0, 0.5) 40%,<br />
rgba(0, 0, 0, 0.2) 70%,<br />
rgba(0, 0, 0, 0.1) 100%<br />
);<br />
}<br />
<br />
#carousel-container .slide-content {<br />
position: absolute;<br />
bottom: 0;<br />
left: 0;<br />
right: 0;<br />
padding: 24px 32px;<br />
z-index: 2;<br />
}<br />
<br />
#carousel-container .slide-category {<br />
display: inline-block;<br />
border: 1.5px solid #ffffff;<br />
color: #ffffff;<br />
font-size: 11px;<br />
font-weight: 700;<br />
letter-spacing: 1.5px;<br />
padding: 3px 10px;<br />
margin-bottom: 16px;<br />
text-transform: uppercase;<br />
background: transparent;<br />
}<br />
<br />
#carousel-container .slide-title {<br />
font-size: 24px;<br />
font-weight: 800;<br />
color: #ffffff;<br />
margin: 0 0 8px 0;<br />
line-height: 1.3;<br />
}<br />
<br />
#carousel-container .slide-desc {<br />
font-size: 14px;<br />
color: rgba(255, 255, 255, 0.85);<br />
margin: 0 0 16px 0;<br />
font-weight: 500;<br />
line-height: 1.5;<br />
}<br />
<br />
/* ===== 指示器 ===== */<br />
#carousel-container .carousel-indicators {<br />
display: flex;<br />
gap: 6px;<br />
align-items: center;<br />
}<br />
<br />
#carousel-container .carousel-indicator {<br />
width: 24px;<br />
height: 3px;<br />
background: rgba(255, 255, 255, 0.35);<br />
border: none;<br />
border-radius: 2px;<br />
cursor: pointer;<br />
padding: 0;<br />
transition: all 0.3s ease;<br />
position: relative;<br />
overflow: hidden;<br />
}<br />
<br />
#carousel-container .carousel-indicator::after {<br />
content: '';<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
height: 100%;<br />
width: 0%;<br />
background: #fb5711;<br />
border-radius: 2px;<br />
transition: none;<br />
}<br />
<br />
#carousel-container .carousel-indicator.active::after {<br />
width: 100%;<br />
transition: width 5s linear;<br />
}<br />
<br />
#carousel-container .carousel-indicator.active {<br />
width: 32px;<br />
background: rgba(255, 255, 255, 0.2);<br />
}<br />
<br />
#carousel-container .carousel-indicator.visited {<br />
background: #fb5711;<br />
}<br />
<br />
#carousel-container .carousel-indicator.visited::after {<br />
width: 100%;<br />
transition: none;<br />
}<br />
<br />
/* ===== 左右箭头 ===== */<br />
#carousel-container .carousel-arrow {<br />
position: absolute;<br />
top: 50%;<br />
transform: translateY(-50%);<br />
z-index: 10;<br />
background: rgba(0, 0, 0, 0.45);<br />
border: none;<br />
color: #fff;<br />
width: 40px;<br />
height: 40px;<br />
border-radius: 50%;<br />
cursor: pointer;<br />
font-size: 18px;<br />
display: flex;<br />
align-items: center;<br />
justify-content: center;<br />
opacity: 0;<br />
transition: opacity 0.3s ease, background 0.3s ease;<br />
}<br />
<br />
#carousel-container:hover .carousel-arrow {<br />
opacity: 1;<br />
}<br />
<br />
#carousel-container .carousel-arrow:hover {<br />
background: #fb5711;<br />
}<br />
<br />
#carousel-container .carousel-arrow-left {<br />
left: 12px;<br />
}<br />
<br />
#carousel-container .carousel-arrow-right {<br />
right: 12px;<br />
}<br />
<br />
/* ===== 单张时隐藏控件 ===== */<br />
#carousel-container.single-slide .carousel-arrow,<br />
#carousel-container.single-slide .carousel-indicators {<br />
display: none !important;<br />
}<br />
<br />
/* ===== 响应式 ===== */<br />
@media (max-width: 600px) {<br />
#carousel-container .slide-content {<br />
padding: 16px 20px;<br />
}<br />
#carousel-container .slide-title {<br />
font-size: 18px;<br />
}<br />
#carousel-container .slide-desc {<br />
font-size: 12px;<br />
}<br />
#carousel-container .carousel-arrow {<br />
width: 32px;<br />
height: 32px;<br />
font-size: 14px;<br />
}<br />
}<br />
</style><br />
<br />
<script><br />
(function() {<br />
function initCarousel() {<br />
var dataEl = document.getElementById('carousel-data');<br />
var container = document.getElementById('carousel-container');<br />
if (!dataEl || !container) return;<br />
<br />
var count = parseInt(dataEl.getAttribute('data-count')) || 1;<br />
if (count > 4) count = 4;<br />
<br />
var slides = [];<br />
for (var i = 1; i <= count; i++) {<br />
slides.push({<br />
image: dataEl.getAttribute('data-banner' + i) || '',<br />
category: dataEl.getAttribute('data-banner' + i + '-category') || '',<br />
title: dataEl.getAttribute('data-banner' + i + '-title') || '',<br />
desc: dataEl.getAttribute('data-banner' + i + '-desc') || '',<br />
jump: dataEl.getAttribute('data-banner' + i + '-jump') || ''<br />
});<br />
}<br />
<br />
if (slides.length === 0) return;<br />
if (slides.length === 1) container.classList.add('single-slide');<br />
<br />
// Build HTML<br />
var html = '<div class="carousel-wrapper">';<br />
<br />
// Slides<br />
for (var i = 0; i < slides.length; i++) {<br />
var s = slides[i];<br />
var href = s.jump ? (mw.config.get('wgArticlePath').replace('$1', encodeURIComponent(s.jump))) : '#';<br />
html += '<a class="carousel-slide' + (i === 0 ? ' active' : '') + '" href="' + href + '">';<br />
html += '<div class="slide-bg" style="background-image:url(\'' + s.image.replace(/'/g, "\\'") + '\')"></div>';<br />
html += '<div class="slide-overlay"></div>';<br />
html += '<div class="slide-content">';<br />
if (s.category) {<br />
html += '<span class="slide-category">' + s.category + '</span>';<br />
}<br />
if (s.title) {<br />
html += '<h3 class="slide-title">' + s.title + '</h3>';<br />
}<br />
if (s.desc) {<br />
html += '<p class="slide-desc">' + s.desc + '</p>';<br />
}<br />
// Indicators inside content area<br />
if (slides.length > 1) {<br />
html += '<div class="carousel-indicators">';<br />
for (var j = 0; j < slides.length; j++) {<br />
html += '<button class="carousel-indicator' + (j === 0 ? ' active' : '') + '" data-index="' + j + '"></button>';<br />
}<br />
html += '</div>';<br />
}<br />
html += '</div></a>';<br />
}<br />
<br />
// Arrows<br />
if (slides.length > 1) {<br />
html += '<button class="carousel-arrow carousel-arrow-left">&#10094;</button>';<br />
html += '<button class="carousel-arrow carousel-arrow-right">&#10095;</button>';<br />
}<br />
<br />
html += '</div>';<br />
container.innerHTML = html;<br />
<br />
if (slides.length <= 1) return;<br />
<br />
// Carousel logic<br />
var current = 0;<br />
var slideEls = container.querySelectorAll('.carousel-slide');<br />
var allIndicators = container.querySelectorAll('.carousel-indicator');<br />
var timer = null;<br />
var INTERVAL = 5000;<br />
<br />
function getIndicatorsForSlide(idx) {<br />
// Each slide has its own set of indicators; get them<br />
var sets = [];<br />
for (var s = 0; s < slideEls.length; s++) {<br />
var inds = slideEls[s].querySelectorAll('.carousel-indicator');<br />
sets.push(inds);<br />
}<br />
return sets;<br />
}<br />
<br />
function goTo(idx, fromAuto) {<br />
if (idx === current) return;<br />
slideEls[current].classList.remove('active');<br />
current = idx;<br />
slideEls[current].classList.add('active');<br />
updateIndicators();<br />
resetTimer();<br />
}<br />
<br />
function updateIndicators() {<br />
// Update indicators in ALL slides (so the active slide shows correct state)<br />
var allSets = container.querySelectorAll('.carousel-slide');<br />
for (var s = 0; s < allSets.length; s++) {<br />
var inds = allSets[s].querySelectorAll('.carousel-indicator');<br />
for (var j = 0; j < inds.length; j++) {<br />
inds[j].classList.remove('active', 'visited');<br />
if (j < current) {<br />
inds[j].classList.add('visited');<br />
} else if (j === current) {<br />
// Force reflow for animation restart<br />
inds[j].classList.add('active');<br />
void inds[j].offsetWidth;<br />
}<br />
}<br />
}<br />
// Re-trigger the animation by removing and re-adding<br />
setTimeout(function() {<br />
var activeInds = container.querySelectorAll('.carousel-indicator.active');<br />
for (var k = 0; k < activeInds.length; k++) {<br />
activeInds[k].classList.remove('active');<br />
void activeInds[k].offsetWidth;<br />
activeInds[k].classList.add('active');<br />
}<br />
}, 10);<br />
}<br />
<br />
function next() {<br />
goTo((current + 1) % slides.length);<br />
}<br />
<br />
function prev() {<br />
goTo((current - 1 + slides.length) % slides.length);<br />
}<br />
<br />
function resetTimer() {<br />
clearInterval(timer);<br />
timer = setInterval(next, INTERVAL);<br />
}<br />
<br />
// Arrow events<br />
container.querySelector('.carousel-arrow-left').addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
prev();<br />
});<br />
container.querySelector('.carousel-arrow-right').addEventListener('click', function(e) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
next();<br />
});<br />
<br />
// Indicator events (delegate)<br />
container.addEventListener('click', function(e) {<br />
var btn = e.target.closest('.carousel-indicator');<br />
if (btn) {<br />
e.preventDefault();<br />
e.stopPropagation();<br />
var idx = parseInt(btn.getAttribute('data-index'));<br />
if (!isNaN(idx)) goTo(idx);<br />
}<br />
});<br />
<br />
// Pause on hover<br />
container.addEventListener('mouseenter', function() { clearInterval(timer); });<br />
container.addEventListener('mouseleave', function() { resetTimer(); });<br />
<br />
updateIndicators();<br />
resetTimer();<br />
}<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', initCarousel);<br />
} else {<br />
initCarousel();<br />
}<br />
})();<br />
</script></div>
律Rhyme