javascript - 单击第一个元素时的JavaScript滑块移动到最后一个元素
问题描述
我正在用纯 JavaScript 制作一个滑块,我缺少并且无法弄清楚的部分是。当我在第一个元素并单击上一个按钮移动到最后一个元素时,我尝试使用具有多个选项的模数,例如元素的长度,但没有奏效。我知道修复与模数有关,但找出缺少的内容。此注释下的代码是问题所在(//单击上一个按钮时移至上一个元素。)
注意:我实现了下一个按钮部分是在单击时显示最后一个元素,它会移动到第一个元素。
HTML:
<div id="sliderContainer"></div>
<div class="buttonsCont">
<button id="previous">Previous</button>
<button id="next">Next</button>
</div>
JS:
(function(){
/***********************VARS************************/
let arrImgs , arrImgsTitle , arrImgsLength , i , mainDiv , createDiv , createDivID, incr, createDivContent,
createDivImg , createDivImgTitle , add , sliderDiv , newSliderDiv , createDivClass, next, previous,
j , k;
arrImgs = [
{
src : 'building1.jpg',
title : 'tall building'
},
{
src : 'fox.jpg',
title : 'orange fox'
},
{
src : 'nature1.jpeg',
title : 'water fall'
},
{
src : 'sun.jpg',
title : 'flame'
},
{
src : 'sunset1.jpg',
title : 'ghorob gamel'
}
]
//length of the array
arrImgsLength = arrImgs.length;
//getting the main container div
mainDiv = document.getElementById('sliderContainer');
//variable used to add unique ID to every div
incr = 0
//create many divs same as the length of the array
for(i = 0 ; i < arrImgsLength ; i++) {
createDiv = document.createElement('div');
createDivID = createDiv.setAttribute('id' , 'slid' + incr++);
createDivClass = createDiv.setAttribute('class' , 'show');
//create image inside each div
createDivImg = document.createElement('img');
createDiv.appendChild(createDivImg)
//append created divs inside main div
mainDiv.appendChild(createDiv);
//add images to divs
createDivContent = createDivImg.src = './imgs/' + arrImgs[i].src
createDivImgTitle = createDivImg.setAttribute('title' , arrImgs[i].title);
}
//hide all divs except for first one
add = 0;
sliderDiv = document.querySelector("div#slid" + add);
let getDivs = function(sliderDiv){
let sliderEmArr = [];
let sibling = sliderDiv.parentNode.firstChild;
while(sibling) {
if(sibling.nodeType === 1 && sibling !== sliderDiv) {
sliderEmArr.push(sibling);
if(sibling.classList.contains('show')){
sibling.setAttribute('class' , 'hide');
}
}
sibling = sibling.nextSibling;
}
return sliderEmArr;
}
let siblings = getDivs(sliderDiv);
//when next button clicked and when reach the last element go to //first;
next = document.getElementById('next');
next.addEventListener("click" , nextSlide);
function nextSlide(){
for(j = 0 ; j < arrImgsLength; j++){
newSliderDiv = document.querySelector('div#slid' + j);
if(!newSliderDiv.classList.contains('hide')){
newSliderDiv.setAttribute('class', 'hide');
let nextEl = document.querySelector('div#slid' + ++j % arrImgsLength);
nextEl.setAttribute('class' , 'show');
}
}
}
//previous button when clicked move to the previous element.
previous = document.getElementById('previous');
previous.addEventListener('click' , prevSlide);
function prevSlide(){
for(k = arrImgsLength -1; k >= 0 ; k--) {
newSliderDiv2 = document.querySelector('div#slid' + k);
if(!newSliderDiv2.classList.contains('hide')){
newSliderDiv2.setAttribute('class' , 'hide');
let prevEl = document.querySelector('div#slid' + --k ) ;
prevEl.setAttribute('class' , 'show')
}
}
}
})();
解决方案
您在此处显示“上一张幻灯片”:
let prevEl = document.querySelector('div#slid' + --k );
prevEl.setAttribute('class' , 'show');
检查 k != 0; 如果不为0,则正常进行。如果为 0,则使用最后一项的索引。
let prevEl = document.querySelector('div#slid' + (k ? --k : arrImgsLength - 1));
prevEl.setAttribute('class' , 'show');
推荐阅读
- javascript - 如何通过 document.write(pdf 打印)将宽度传递给 apexChart 容器?
- docker - Mysql 8 with docker return Host '172.xx.xx' is not allowed to connect to this MySQL server
- javascript - 在页面加载时选中复选框
- python - 文本不会附加到 .txt 文件中 - Python
- javascript - 如何获取用户要保存的列表项的标题
- sql - 使用 MAX 函数时“选择列表与 GROUP BY 不一致”
- excel - 弹出另存为对话框时如何点击保存
- nlp - 如何比较三个预训练模型的余弦相似度?
- anylogic - 参数变化:固定,但运行的种子不同
- arrays - Qimage 到 2D 二进制数组