帮我写一个手动跳转焦点图的js
时间: 2024-02-23 14:59:08 浏览: 23
好的,以下是一个简单的手动跳转焦点图的js代码:
```javascript
// 获取焦点图容器和所有焦点图项
const slider = document.querySelector('.slider');
const items = slider.querySelectorAll('.slider-item');
// 获取上一个和下一个按钮
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
// 定义当前焦点图项的索引
let currentIndex = 0;
// 显示当前焦点图项
function showCurrentItem() {
items[currentIndex].classList.add('active');
}
// 隐藏所有焦点图项
function hideAllItems() {
items.forEach(item => item.classList.remove('active'));
}
// 点击上一个按钮
prevBtn.addEventListener('click', () => {
hideAllItems();
currentIndex = (currentIndex === 0) ? (items.length - 1) : (currentIndex - 1);
showCurrentItem();
});
// 点击下一个按钮
nextBtn.addEventListener('click', () => {
hideAllItems();
currentIndex = (currentIndex === items.length - 1) ? 0 : (currentIndex + 1);
showCurrentItem();
});
// 初始化,显示第一个焦点图项
showCurrentItem();
```
这段代码假设焦点图容器的类名为 `slider`,焦点图项的类名为 `slider-item`,上一个按钮的类名为 `prev-btn`,下一个按钮的类名为 `next-btn`。你可以根据实际情况进行修改。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)