Question

我想制作一个带有箭头的滑块，我尝试了几种方法，但是我还是失败了，所以我真的不知道从哪里开始这是我的html

    <div class="previous-butn"></div>
<div class="slider">
<a href="">
<img src="assets/media/images/colormood-slide.jpg" alt="">
</a>
<div class="next-butn"></div>

这是我的js

const currentSlide = document.querySelector('.slider img');
const projectSlide = [
'assets/media/images/colormood-slide.jpg',
'assets/media/images/cancellato-slide.jpg',
'assets/media/images/grazia-slide.jpg',
'assets/media/images/maxnextdoor-slide.jpg',
'assets/media/images/sasha-slide.jpg',
'assets/media/images/windinthecity-slide.jpg',
'assets/media/images/gullsnitt-slide.jpg'
];
let slidesCounter = 1;

Answer 1

首先为滑块创建HTML和CSS。使用一个包含其他所有内容的单个div。在您的滑块情况下，容器div应该包含两个主要的div，一个用于滑块图像，另一个则包含控制按钮，即箭头。

在滑块图像的容器中，放置多张图像。

仅在第一张图片上使用CSS类，例如“ active”。现在编写CSS以隐藏除具有“ active”类的图像以外的所有图像。还可以使用CSS将导航器箭头放置在所需的位置。

现在在浏览器中打开页面，看是否可以。可以的话，转到JS

将点击事件添加到箭头按钮（目前不考虑自动播放）

以下是NEXT按钮的逻辑

CurrentActiveImageIndex =获取具有活动类的图像的索引
TotalNumberOfImages =计算滑块中的图像总数
NextActiveImageIndex = CurrentActiveImageIndex +1
IF NextActiveImageIndex == TotalNumberOfImages
Then NextActiveImageIndex = 0
从所有图像中删除活动班级
将活动类添加到NextActiveImageIndex上的图像

PREVIOUS按钮的逻辑正好相反，以下仅是更改的行

NextActiveImageIndex = CurrentActiveImageIndex-1
IF NextActiveImageIndex <0
THEN NextActiveImageIndex = TotalNumberOfImages-1

带有箭头的Javascript滑块

1 个答案: