zhaichao/ningbo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

轮播图板块4

Browse Source
This commit is contained in:
zhaichao
2026-09-22 16:37:46 +08:00
parent d28ba4810e
commit c915268d5b
3 changed files with 340 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/dbzq.html
+120
View File
@@ -147,6 +147,62 @@
</ul>
</section>
<!-- 板块4 -->
<section class="block-4">
<img class="block-4-logo" src="assest/新闻logo.png" alt="">
<div class="block-4-carousel">
<div class="carousel-slide is-active">
<img src="" alt="">
<p>海军某部开展实战化训练 锤炼制胜本领</p>
</div>
<div class="carousel-slide">
<img src="" alt="">
<p>东部战区海军某驱逐舰支队海上演训</p>
</div>
<div class="carousel-slide">
<img src="" alt="">
<p>海军航空兵某团组织跨昼夜飞行训练</p>
</div>
<button type="button" class="carousel-btn carousel-prev" aria-label="上一张">‹</button>
<button type="button" class="carousel-btn carousel-next" aria-label="下一张">›</button>
<div class="carousel-dots">
<button type="button" class="is-active" aria-label="第1张"></button>
<button type="button" aria-label="第2张"></button>
<button type="button" aria-label="第3张"></button>
</div>
</div>
<div class="block-4-tabs">
<button type="button" class="block-4-tab is-active" data-tab="0"><span>军政要闻</span></button>
<button type="button" class="block-4-tab" data-tab="1"><span>东海要闻</span></button>
<button type="button" class="block-4-tab" data-tab="2"><span>部队要闻</span></button>
</div>
<div class="block-4-line"></div>
<div class="block-4-panel is-active" data-panel="0">
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
</div>
<div class="block-4-panel" data-panel="1">
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
</div>
<div class="block-4-panel" data-panel="2">
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
<div class="block-4-item"><span>内容文字占位内容文字占位</span></div>
</div>
</section>
<!-- 板块：Footer -->
<footer class="footer">
<a class="footer-link footer-link-stats" href="javascript:;">信息统计</a>
@@ -264,6 +320,70 @@
</div>
</div>
</footer>
<script>
(function () {
var root = document.querySelector(".block-4-carousel");
if (!root) return;
var slides = root.querySelectorAll(".carousel-slide");
var dots = root.querySelectorAll(".carousel-dots button");
var index = 0;
var timer = null;
function show(next) {
index = (next + slides.length) % slides.length;
slides.forEach(function (slide, i) {
slide.classList.toggle("is-active", i === index);
});
dots.forEach(function (dot, i) {
dot.classList.toggle("is-active", i === index);
});
}
function start() {
stop();
timer = setInterval(function () {
show(index + 1);
}, 4000);
}
function stop() {
if (timer) clearInterval(timer);
}
root.querySelector(".carousel-prev").addEventListener("click", function () {
show(index - 1);
start();
});
root.querySelector(".carousel-next").addEventListener("click", function () {
show(index + 1);
start();
});
dots.forEach(function (dot, i) {
dot.addEventListener("click", function () {
show(i);
start();
});
});
root.addEventListener("mouseenter", stop);
root.addEventListener("mouseleave", start);
start();
})();
(function () {
var tabs = document.querySelectorAll(".block-4-tab");
var panels = document.querySelectorAll(".block-4-panel");
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
var index = tab.getAttribute("data-tab");
tabs.forEach(function (item) {
item.classList.toggle("is-active", item === tab);
});
panels.forEach(function (panel) {
panel.classList.toggle("is-active", panel.getAttribute("data-panel") === index);
});
});
});
})();
</script>
</body>
</html>