<div class=”panorama-container”><!– 左侧全景 iframe –>
<div class=”panorama-iframe”>
<iframe id=”panorama-frame” src=”https://embed.3dweb.io?presentation=eyJpZCI6ImU2MTUxODEyLWZkYmItNGMxYS04Yzc2LWFhZDk5NzBjZmJmNiJ9″ title=”全景展示” allowfullscreen></iframe>
</div><!– 右侧图片 –>
<div class=”panorama-images”>
<img src=”https://gzgoldstar.com/wp-content/uploads/2025/01/B3-image.jpg” alt=”展示1″ data-src=”https://embed.3dweb.io?presentation=eyJpZCI6ImU2MTUxODEyLWZkYmItNGMxYS04Yzc2LWFhZDk5NzBjZmJmNiJ9″ aria-label=”切换到展示1″>
<img src=”https://gzgoldstar.com/wp-content/uploads/2025/01/T7-image.jpg” alt=”展示2″ data-src=”https://embed.3dweb.io?presentation=eyJpZCI6ImU5NjlkZTQxLWM5N2MtNDIzZS05OTNhLWM2ZTlmMjc2OWQ2ZSJ9″ aria-label=”切换到展示2″>
<img src=”https://gzgoldstar.com/wp-content/uploads/2025/01/T7-image.jpg” alt=”展示3″ data-src=”https://embed.3dweb.io?presentation=eyJpZCI6ImVmYTIxMWNjLTQ1NzktNDk2OS1hZDQ4LWY4OTIwYTk0YWE3ZSJ9″ aria-label=”切换到展示3″>
</div>
</div>
/* 全景展示容器 */
.panorama-container {
display: flex;
flex-wrap: nowrap;
max-width: 100%;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* 左侧全景 iframe */
.panorama-iframe {
flex: 3;
padding: 10px;
box-sizing: border-box;
}
.panorama-iframe iframe {
width: 100%;
height: 800px; /* 设置合适的高度 */
border: 3px solid #d9534f; /* 红色边框 */
border-radius: 8px;
transition: opacity 0.5s ease-in-out;
}
/* 右侧图片 */
.panorama-images {
flex: 1;
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
margin-left: 20px; /* 为iframe和图片之间添加间距 */
}
.panorama-images img {
width: 100%;
margin-bottom: 15px;
cursor: pointer;
border: 2px solid #d9534f; /* 图片边框 */
border-radius: 5px;
transition: transform 0.3s, border-color 0.3s;
}
.panorama-images img:last-child {
margin-bottom: 0;
}
.panorama-images img:hover {
transform: scale(1.05);
border-color: #a71d2a;
}
.panorama-images img.active {
border-color: #a71d2a; /* 高亮边框颜色 */
transform: scale(1.05);
}
/* 响应式设计 */
@media (max-width: 1200px) {
.panorama-container {
flex-direction: column;
align-items: center;
}
.panorama-iframe, .panorama-images {
width: 100%;
max-width: 1300px;
}
.panorama-iframe iframe {
height: 600px; /* 在中等屏幕上适当减少高度 */
}
.panorama-images {
flex-direction: row;
justify-content: space-between;
margin-left: 0;
margin-top: 20px;
}
.panorama-images img {
width: 32%; /* 三张图片并排显示 */
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.panorama-iframe iframe {
height: 400px; /* 在小屏幕上适当减少高度 */
}
.panorama-images {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.panorama-images img {
width: 48%; /* 两张图片并排显示 */
margin-bottom: 10px;
}
.panorama-images img:nth-child(3) {
width: 100%; /* 最后一张图片占满一行 */
}
}
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const images = document.querySelectorAll(‘.panorama-images img’);
const iframe = document.getElementById(‘panorama-frame’);
images.forEach(img => {
img.addEventListener(‘click’, function() {
const newSrc = this.getAttribute(‘data-src’);
if(newSrc) {
iframe.src = newSrc;
// Optionally, add active class to highlight selected image
images.forEach(i => i.classList.remove(‘active’));
this.classList.add(‘active’);
}
});
});
});
</script>
<div class=”panorama-container”><!– 左侧全景 iframe –>
<div class=”panorama-iframe”>
<iframe id=”panorama-frame” src=”https://embed.3dweb.io?presentation=eyJpZCI6ImU2MTUxODEyLWZkYmItNGMxYS04Yzc2LWFhZDk5NzBjZmJmNiJ9″ title=”全景展示” allowfullscreen></iframe>
</div><!– 右侧图片 –>
<div class=”panorama-images”>
<img src=”https://gzgoldstar.com/wp-content/uploads/2025/01/B3-image.jpg” alt=”展示1″ data-src=”https://embed.3dweb.io?presentation=eyJpZCI6ImU2MTUxODEyLWZkYmItNGMxYS04Yzc2LWFhZDk5NzBjZmJmNiJ9″ aria-label=”切换到展示1″>
<img src=”https://gzgoldstar.com/wp-content/uploads/2025/01/T7-image.jpg” alt=”展示2″ data-src=”https://embed.3dweb.io?presentation=eyJpZCI6ImU5NjlkZTQxLWM5N2MtNDIzZS05OTNhLWM2ZTlmMjc2OWQ2ZSJ9″ aria-label=”切换到展示2″>
<img src=”https://gzgoldstar.com/wp-content/uploads/2025/01/T7-image.jpg” alt=”展示3″ data-src=”https://embed.3dweb.io?presentation=eyJpZCI6ImVmYTIxMWNjLTQ1NzktNDk2OS1hZDQ4LWY4OTIwYTk0YWE3ZSJ9″ aria-label=”切换到展示3″>
</div>
</div>
/* 全景展示容器 */
.panorama-container {
display: flex;
flex-wrap: nowrap;
max-width: 100%;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* 左侧全景 iframe */
.panorama-iframe {
flex: 3;
padding: 10px;
box-sizing: border-box;
}
.panorama-iframe iframe {
width: 100%;
height: 800px; /* 设置合适的高度 */
border: 3px solid #d9534f; /* 红色边框 */
border-radius: 8px;
transition: opacity 0.5s ease-in-out;
}
/* 右侧图片 */
.panorama-images {
flex: 1;
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
margin-left: 20px; /* 为iframe和图片之间添加间距 */
}
.panorama-images img {
width: 100%;
margin-bottom: 15px;
cursor: pointer;
border: 2px solid #d9534f; /* 图片边框 */
border-radius: 5px;
transition: transform 0.3s, border-color 0.3s;
}
.panorama-images img:last-child {
margin-bottom: 0;
}
.panorama-images img:hover {
transform: scale(1.05);
border-color: #a71d2a;
}
.panorama-images img.active {
border-color: #a71d2a; /* 高亮边框颜色 */
transform: scale(1.05);
}
/* 响应式设计 */
@media (max-width: 1200px) {
.panorama-container {
flex-direction: column;
align-items: center;
}
.panorama-iframe, .panorama-images {
width: 100%;
max-width: 1300px;
}
.panorama-iframe iframe {
height: 600px; /* 在中等屏幕上适当减少高度 */
}
.panorama-images {
flex-direction: row;
justify-content: space-between;
margin-left: 0;
margin-top: 20px;
}
.panorama-images img {
width: 32%; /* 三张图片并排显示 */
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.panorama-iframe iframe {
height: 400px; /* 在小屏幕上适当减少高度 */
}
.panorama-images {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.panorama-images img {
width: 48%; /* 两张图片并排显示 */
margin-bottom: 10px;
}
.panorama-images img:nth-child(3) {
width: 100%; /* 最后一张图片占满一行 */
}
}
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const images = document.querySelectorAll(‘.panorama-images img’);
const iframe = document.getElementById(‘panorama-frame’);
images.forEach(img => {
img.addEventListener(‘click’, function() {
const newSrc = this.getAttribute(‘data-src’);
if(newSrc) {
iframe.src = newSrc;
// Optionally, add active class to highlight selected image
images.forEach(i => i.classList.remove(‘active’));
this.classList.add(‘active’);
}
});
});
});
</script>
<div class=”background-text”>FEATURED PARTS</div>
<div class=”foreground-text”>
FEATURED <span class=”highlighted”>PARTS</span>
</div>
</div>
.featured-parts-section {
position: relative;
text-align: center;
height: 200px; /* 根据需要调整高度 */
display: flex;
align-items: center;
justify-content: center;
background-color: #000; /* 背景色:黑色 */
}
.background-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12vw; /* 背景文字大小 */
font-weight: bold;
color: rgba(255, 255, 255, 0.1); /* 背景文字透明效果 */
z-index: 1;
white-space: nowrap;
pointer-events: none;
}
.foreground-text {
position: relative;
z-index: 2;
font-size: 2.5rem; /* 前景文字大小 */
color: #fff; /* 前景文字颜色 */
font-weight: bold;
}
.foreground-text .highlighted {
color: orange; /* 前景文字中部分文字的高亮颜色 */
}
黑马源码资源网 »