帮我写一段轮播图效果,每次左移移动200px,箭头要自动隐藏的
时间: 2023-02-06 17:27:25 浏览: 59
好的,以下是一段轮播图效果的代码。这个轮播图每次向左移动 200 像素,并且箭头会在移动的时候自动隐藏。
```
// 获取轮播图容器
var carousel = document.getElementById('carousel');
// 获取左箭头
var arrowLeft = document.getElementById('arrow-left');
// 获取右箭头
var arrowRight = document.getElementById('arrow-right');
// 定义当前图片的索引
var currentIndex = 0;
// 定义图片总数
var totalImages = carousel.children.length;
// 定义每次移动的距离
var moveDistance = 200;
// 定义轮播图移动函数
function moveCarousel() {
// 隐藏箭头
arrowLeft.style.display = 'none';
arrowRight.style.display = 'none';
// 计算新的位置
var newPosition = currentIndex * moveDistance * -1;
// 设置轮播图的新位置
carousel.style.left = newPosition + 'px';
// 延迟显示箭头
setTimeout(function() {
arrowLeft.style.display = 'block';
arrowRight.style.display = 'block';
}, 500);
}
// 给左箭头绑定点击事件
arrowLeft.addEventListener('click', function() {
// 如果当前图片不是第一张,就向左移动
if (currentIndex > 0) {
currentIndex--;
moveCarousel();
}
});
// 给右箭头绑定点击事件
arrowRight.addEventListener('click', function() {
// 如果当前图片不是最后一张,就向右移动
if (currentIndex < totalImages - 1) {
currentIndex++;
moveCarousel();
}
});
```
希望这段代码能帮到你。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)