如何解决当我不会将图像切换到后退时，无论如何切换到前进
我在滑块中更改图像时遇到问题。向前是可以的，但是当我想向后改变时，无论如何都要切换到向前。你能在我的项目中进行代码审查吗？我的错误在哪里.. 我知道问题出在这个 if(e.keyCode === 37) 上，但我不知道。我不知道要添加什么才能使它起作用。
附注 对不起我的英语；/
const slideList = [{
img: "images/img1.jpg",text: 'First text'
},{
img: "images/img2.jpg",text: 'Second tekst'
},{
img: "images/img3.jpg",text: 'Third tekst'
}];
const img = document.querySelector('img.slider');
const h1 = document.querySelector('h1');
const dots = document.querySelectorAll('span');
const time = 30000;
let active = 1;
const changeSlide = () => {
if(active === slideList.length){
active = 0;
}
img.removeAttribute('img');
img.setAttribute("src",slideList[active].img);
h1.textContent = slideList[active].text;
dots.forEach(el => {
el.classList.remove('active');
})
dots[active].classList.add('active');
active++;
}
setInterval(changeSlide,time);
// Check the keyCode
// window.addEventListener('keydown',function(e){
// console.log(e.keyCode);
// });
window.addEventListener('keydown',(e) => {
if(e.keyCode === 39) {
console.log(`Arrow right ----> e.keyCode = ${e.keyCode}`);
if(active === slideList.length + 1){
active = 0;
changeSlide();
}
active = active++;
changeSlide();
}
if (e.keyCode === 37) {
console.log(`Arrow left <---- e.keyCode: ${e.keyCode}`);
if (active === -1) {
active = slideList.length;
console.log(`if active = -1: ${active}`);
} else {
active = active--;
}
changeSlide();
}
});<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Slider</title>
<style>
* {
margin: 0;
}
header {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
img {
position: absolute;
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0.6;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 40px;
font-family: tahoma,sans-serif;
text-shadow: 0 0 6px white;
}
.dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%)
}
.dots span {
display: inline-block;
background-color: #000;
margin: 0 20px;
width: 10px;
height: 10px;
border-radius: 50%;
Box-shadow: 0 0 0 5px white;
}
.dots span.active {
Box-shadow: 0 0 0 5px white,0 0 3px 10px red;
}
</style>
</head>
<body>
<header>
<img class="slider" src="images/img1.jpg" alt="">
<h1 class="slider">Pierwszy tekst</h1>
<div class="dots">
<span id="one" class="active"></span>
<span id="two"></span>
<span id="three"></span>
</div>
</header>
<script src="main.js"></script>
</body>
</html>也许有人可以帮助我。
解决方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider</title>
<style>
* {
margin: 0;
}
header {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
img {
position: absolute;
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0.6;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 40px;
font-family: tahoma,sans-serif;
text-shadow: 0 0 6px white;
}
.dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%)
}
.dots span {
display: inline-block;
background-color: #000;
margin: 0 20px;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 0 5px white;
}
.dots span.active {
box-shadow: 0 0 0 5px white,0 0 3px 10px red;
}
</style>
</head>
<body>
<header>
<img class="slider" src="images/img1.jpg" alt="">
<h1 class="slider">Pierwszy tekst</h1>
<div class="dots">
<span id="one" class="active"></span>
<span id="two"></span>
<span id="three"></span>
</div>
</header>
<script>
const slideList = [{
img: "images/img1.jpg",text: 'First text'
},{
img: "images/img2.jpg",text: 'Second tekst'
},{
img: "images/img3.jpg",text: 'Third tekst'
}];
const img = document.querySelector('img.slider');
const h1 = document.querySelector('h1');
const dots = document.querySelectorAll('span');
const time = 30000;
let active = 0;
function next_image(v) {
active += v;
if (active < 0) {
active = 2
}
else if (active > 2) {
active=0;
}
return active;
}
const changeSlide = (direction=0) => {
//when executed from timer direction is 0 whitch translated as 1 (go next,right)
// if (active === slideList.length) {
// active = 0;
// }
if (direction == 0) direction = 1;
next_image(direction);
img.removeAttribute('img');
img.setAttribute("src",slideList[active].img);
h1.textContent = slideList[active].text;
dots.forEach(el => {
el.classList.remove('active');
})
dots[active].classList.add('active');
if (direction == 0) active++;
}
setInterval(changeSlide,time);
// Check the keyCode
// window.addEventListener('keydown',function(e){
// console.log(e.keyCode);
// });
window.addEventListener('keydown',(e) => {
if (e.keyCode === 39) {
//console.log(`Arrow right ----> e.keyCode = ${e.keyCode}`);
// if (active === slideList.length + 1) {
// active = 0;
// changeSlide();
// }
// active = active++;
changeSlide(1);
}
if (e.keyCode === 37) {
//console.log(`Arrow left <---- e.keyCode: ${e.keyCode}`);
// if (active === -1) {
// active = slideList.length;
// console.log(`if active = -1: ${active}`);
// } else {
// active = active--;
// }
changeSlide(-1);
}
});
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
