在网页设计中，焦点图（或称为幻灯片、轮播图）是一种常见的展示内容的方式，尤其适用于电商网站上展示产品。"显示产品名称的竖焦点图效果" 是一种专门针对产品展示的垂直布局的焦点图实现，它不仅包含图片的切换效果，还强调了产品的名称展示。这种设计能有效地吸引用户的注意力，提高用户体验，同时优化有限的屏幕空间。
在实现这种效果时，主要涉及到的技术包括JavaScript（JS）和CSS。JavaScript是动态网页的关键，用于处理用户交互、更改DOM（文档对象模型）元素，以及创建动画效果。CSS则用于控制页面布局和样式，使焦点图具备美观的视觉呈现。
我们需要创建一个包含多个产品图片和名称的HTML结构。每个产品项通常会是一个包含图片和名称的容器，可以通过数据属性来存储对应的图片链接和产品名称。例如：
```html
<div class="product-slider">
<div class="product-item" data-image="img1.jpg" data-name="产品1">
<img src="img1-thumb.jpg" alt="产品1">
<span class="product-name">产品1</span>
</div>
<!-- 更多产品项... -->
</div>
```
接下来，使用JavaScript来实现焦点图的动态效果。可以编写一个函数来处理图片的切换，这通常包括定时器控制自动播放，以及用户触发的切换事件。例如，通过改变`active`类来切换显示的产品：
```javascript
var slider = document.querySelector('.product-slider');
var products = slider.querySelectorAll('.product-item');
var currentIndex = 0;
function switchProduct(index) {
// 移除当前活动项的active类
products[currentIndex].classList.remove('active');
// 添加新的活动项的active类
products[index].classList.add('active');
currentIndex = index;
}
// 自动播放
setInterval(function() {
if (currentIndex === products.length - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
switchProduct(currentIndex);
}, 3000); // 每3秒切换一次
// 用户交互切换
slider.addEventListener('click', function(e) {
var target = e.target;
if (target.classList.contains('product-item')) {
switchProduct(Array.prototype.indexOf.call(products, target));
}
});
```
同时，CSS将用于控制焦点图的样式，包括产品的垂直布局、图片和名称的展示效果等。例如：
```css
.product-slider {
display: flex;
flex-direction: column;
}
.product-item {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%; /* 保持16:9的宽高比 */
overflow: hidden;
}
.product-item img {
width: 100%;
height: auto;
object-fit: cover;
}
.product-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 24px;
padding: 10px;
}
```
通过以上步骤，我们就能实现一个具有竖向焦点图效果的产品展示模块，其中每个产品图片都会在用户滚动或自动播放时平滑过渡，并且始终显示对应的产品名称。这种效果能够提升网站的专业性和用户体验，让产品信息更加突出。
