【发布时间】：2021-05-10 00:05:52
【问题描述】：
美好的一天
我自己在 JavaScript 中自动和手动制作了一个滑块，我不想使用 jQuery 或 Bootstrap 库。
要从一个图像更改为另一个图像，请使用箭头或圆圈（我还没有使它们起作用）；圆圈随着图像的前进而着色，向前移动图像时效果很好，但是向后移动它们时（通过单击后退箭头）它不会连续前进，它只会保持冻结几秒钟或更长时间，直到然后变为后面的图片。
JavaScript 代码：
let index =0;
let aux_index = 0
let aux_circle =0
const images = ['Image1.jpg','Image2.jpg', 'Image3.jpg']
let index_circle = images.length -1
let image_selected = document.getElementById('img_selected')
const circleSection = document.querySelectorAll(".circle-section")
var timeR = setInterval(next, 4000)
image_selected.src = images[0]
circleSection[index_circle].classList.add('current')
index++;
index_circle--;
function next(){
image_selected.src = images[index]
for (var i =0 ; i < circleSection.length ; i++) {
circleSection[i].classList.remove('current')
}
circleSection[index_circle].classList.add('current')
index++;
aux_index = index-1
aux_circle = index_circle +1
if (index == images.length) {
index = 0;
}
index_circle--
if(index_circle < 0){
index_circle = images.length - 1
}
}
function back(){
if ((aux_index-1) <0) {
aux_index = images.length
}
if (aux_circle == images.length) {
aux_circle = 0
}
image_selected.src = images[aux_index - 1]
for (var i =0 ; i < circleSection.length ; i++) {
circleSection[i].classList.remove('current')
}
circleSection[aux_circle].classList.add('current')
index--
index_circle++
if (index_circle == images.length ) {
index_circle =0
}
if (index <0) {
index = images.length -1
}
}
btn_right.addEventListener('click', function(){
next();
clearInterval(timeR);
timeR = setInterval(next, 4000);
})
btn_left.addEventListener('click', function(){
back()
clearInterval(timeR);
timeR = setInterval(next, 4000);
})
部分 HTML 代码：
<div class="slider-container">
<div class="slider" id="slider_id">
<div class="slider-section" >
<img class="img_slider" id="img_selected" src="">
</div>
</div>
<div id="btn_right" class="btn_slider">></div>
<div id="btn_left" class="btn_slider"><</div>
</div>
<ul id="circles">
<li class="circle-section" id="1"></li>
<li class="circle-section" id="2"></li>
<li class="circle-section" id="3"></li>
</ul>
提前致谢。
【问题讨论】：
-
如果你想要我有一个完整的滑块代码，它非常接近你想要的。
-
@Mister Jojo 我已经做到了，但看到你的滑块也不错。
-
添加为答案
标签： javascript slider carousel slideshow