下面土嘎嘎小编分享一个使用JavaScript实现焦点图特效的示例：
HTML部分：
〓〓html代码如下：〓〓
<div class="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
CSS部分：
〓〓css代码如下：〓〓
.slideshow {
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
}
.slideshow img {
display: none;
position: absolute;
top: 0;
left: 0;
}
.slideshow img.active {
display: block;
}
JavaScript部分：
〓〓javascript代码如下：〓〓
// 获取轮播图容器和所有图片元素
var slideshow = document.querySelector('.slideshow');
var images = slideshow.getElementsByTagName('img');
// 设置初始索引和定时器标识
var currentIndex = 0;
var timer;
// 显示指定索引的图片
function showImage(index) {
// 隐藏当前显示的图片
for (var i = 0; i < images.length; i++) {
images[i].classList.remove('active');
}
// 显示指定索引的图片
images[index].classList.add('active');
}
// 自动播放函数
function startSlideshow() {
timer = setInterval(function() {
// 增加索引并循环播放
currentIndex = (currentIndex + 1) % images.length;
// 显示下一张图片
showImage(currentIndex);
}, 2000); // 每隔2秒切换一张图片
}
// 停止自动播放函数
function stopSlideshow() {
clearInterval(timer);
}
// 开始自动播放
startSlideshow();
// 鼠标悬停时停止自动播放，鼠标离开时继续播放
slideshow.addEventListener('mouseenter', stopSlideshow);
slideshow.addEventListener('mouseleave', startSlideshow);
这个示例展示了一个简单的焦点图特效。通过JavaScript实现定时器和事件监听器，使得图片能够自动切换并在鼠标悬停时停止切换。
注意：以上代码仅为示例，实际应用中可能需要根据具体需求进行适当修改和扩展。