js选项卡切换文字图片选项卡设置延迟加载自动切换

本文链接：https://blog.csdn.net/zichenblog/article/details/147592661

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS选项卡切换（文字+图片+自动切换）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1000px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
}
.tab-wrapper {
position: relative;
overflow: hidden;
}
.tab-header {
display: flex;
border-bottom: 1px solid #ddd;
}
.tab-btn {
padding: 12px 25px;
background: #f8f9fa;
border: none;
border-right: 1px solid #eee;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}
.tab-btn:last-child {
border-right: none;
}
.tab-btn:hover {
background: #e9ecef;
}
.tab-btn.active {
background: #3498db;
color: white;
font-weight: bold;
}
.tab-content {
display: none;
padding: 20px;
min-height: 400px;
animation: fadeIn 0.5s;
}
.tab-content.active {
display: block;
}
.tab-item {
display: flex;
gap: 20px;
align-items: center;
}
.tab-text {
flex: 1;
}
.tab-text h3 {
color: #3498db;
margin-bottom: 15px;
}
.tab-img {
flex: 1;
text-align: center;
}
.tab-img img {
max-width: 100%;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
opacity: 0;
transition: opacity 0.5s;
}
.tab-img img.loaded {
opacity: 1;
}
.controls {
text-align: center;
margin-top: 20px;
}
.control-btn {
padding: 8px 15px;
margin: 0 5px;
background: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.footer {
text-align: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #7f8c8d;
font-size: 14px;
}
.footer a {
color: #e74c3c;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<h1>JS选项卡切换（文字+图片+自动切换）</h1>

<div class="tab-wrapper">
<div class="tab-header">
<button class="tab-btn active" data-tab="tab1">科技新闻</button>
<button class="tab-btn" data-tab="tab2">产品展示</button>
<button class="tab-btn" data-tab="tab3">行业动态</button>
<button class="tab-btn" data-tab="tab4">关于我们</button>
</div>

<div id="tab1" class="tab-content active">
<div class="tab-item">
<div class="tab-text">
<h3>人工智能引领科技新浪潮</h3>
<p>近年来，人工智能技术飞速发展，已广泛应用于医疗、金融、教育等多个领域。专家预测，到2025年，全球AI市场规模将突破1500亿美元。</p>
<p>深度学习和神经网络技术的突破，使得计算机视觉、自然语言处理等AI分支取得了显著进展。</p>
</div>
<div class="tab-img">
<img data-src="https://source.unsplash.com/random/500x300/?ai,technology" alt="AI科技" class="lazy-load">
</div>
</div>
</div>

<div id="tab2" class="tab-content">
<div class="tab-item">
<div class="tab-text">
<h3>全新智能家居系列产品</h3>
<p>我们的新一代智能家居系统现已上市，包含智能灯光控制、温湿度调节、安防监控等全方位解决方案。</p>
<p>产品采用先进的物联网技术，支持语音控制和手机APP远程操作，让您的家庭生活更智能、更便捷。</p>
</div>
<div class="tab-img">
<img data-src="https://source.unsplash.com/random/500x300/?smart,home" alt="智能家居" class="lazy-load">
</div>
</div>
</div>

<div id="tab3" class="tab-content">
<div class="tab-item">
<div class="tab-text">
<h3>2023年IT行业发展趋势</h3>
<p>随着5G网络的普及和云计算技术的成熟，2023年IT行业将迎来新一轮增长。远程办公、云游戏、工业互联网等领域将蓬勃发展。</p>
<p>同时，数据安全和隐私保护也成为行业关注的重点，相关法规政策将进一步完善。</p>
</div>
<div class="tab-img">
<img data-src="https://source.unsplash.com/random/500x300/?tech,trend" alt="行业趋势" class="lazy-load">
</div>
</div>
</div>

<div id="tab4" class="tab-content">
<div class="tab-item">
<div class="tab-text">
<h3>关于我们的公司</h3>
<p>我们是一家专注于科技创新和技术服务的企业，成立于2010年，拥有200多名专业研发人员。</p>
<p>公司致力于将前沿技术转化为实际应用，为客户提供优质的解决方案和服务，已服务超过500家企业客户。</p>
</div>
<div class="tab-img">
<img data-src="https://source.unsplash.com/random/500x300/?office,team" alt="我们的团队" class="lazy-load">
</div>
</div>
</div>

<div class="controls">
<button class="control-btn" id="prevBtn">上一页</button>
<button class="control-btn" id="nextBtn">下一页</button>
<button class="control-btn" id="autoBtn">自动播放</button>
<button class="control-btn" id="stopBtn">停止播放</button>
</div>
</div>

<div class="footer">
技术支持：<a href="http://www.haosf.icu" target="_blank">http://www.haosf.icu</a>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取DOM元素
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const autoBtn = document.getElementById('autoBtn');
const stopBtn = document.getElementById('stopBtn');

let currentTab = 0;
let autoPlayInterval;
const tabCount = tabBtns.length;

// 切换选项卡函数
function switchTab(index) {
// 移除所有active类
tabBtns.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));

// 添加active类到当前选项卡
tabBtns[index].classList.add('active');
tabContents[index].classList.add('active');

// 更新当前选项卡索引
currentTab = index;

// 延迟加载图片
loadImages();
}

// 延迟加载图片函数
function loadImages() {
const currentContent = tabContents[currentTab];
const lazyImages = currentContent.querySelectorAll('img.lazy-load');

lazyImages.forEach(img => {
if (img.dataset.src && !img.src) {
img.src = img.dataset.src;
img.onload = function() {
img.classList.add('loaded');
};
}
});
}

// 初始化加载第一张图片
loadImages();

// 选项卡按钮点击事件
tabBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
switchTab(index);
// 停止自动播放
stopAutoPlay();
});
});

// 上一页按钮
prevBtn.addEventListener('click', () => {
let prevIndex = currentTab - 1;
if (prevIndex < 0) prevIndex = tabCount - 1;
switchTab(prevIndex);
stopAutoPlay();
});

// 下一页按钮
nextBtn.addEventListener('click', () => {
let nextIndex = currentTab + 1;
if (nextIndex >= tabCount) nextIndex = 0;
switchTab(nextIndex);
stopAutoPlay();
});

// 自动播放
function startAutoPlay() {
stopAutoPlay();
autoPlayInterval = setInterval(() => {
let nextIndex = currentTab + 1;
if (nextIndex >= tabCount) nextIndex = 0;
switchTab(nextIndex);
}, 3000);
}

// 停止自动播放
function stopAutoPlay() {
if (autoPlayInterval) {
clearInterval(autoPlayInterval);
autoPlayInterval = null;
}
}

// 自动播放按钮
autoBtn.addEventListener('click', startAutoPlay);

// 停止播放按钮
stopBtn.addEventListener('click', stopAutoPlay);

// 键盘左右箭头控制
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowLeft') {
let prevIndex = currentTab - 1;
if (prevIndex < 0) prevIndex = tabCount - 1;
switchTab(prevIndex);
stopAutoPlay();
} else if (e.key === 'ArrowRight') {
let nextIndex = currentTab + 1;
if (nextIndex >= tabCount) nextIndex = 0;
switchTab(nextIndex);
stopAutoPlay();
}
});
});
</script>
</body>
</html>