时间戳

首页 > 解决方案 > 当我不会将图像切换到后退时，无论如何都会切换到前进

javascript - 当我不会将图像切换到后退时，无论如何都会切换到前进

问题描述

我在滑块中更改图像时遇到问题。前进是可以的，但是当我想向后改变时，无论如何都要切换到前进。你能在我的项目中进行代码审查吗？我的错误在哪里.. 我知道问题出在这if(e.keyCode === 37)，但我不知道。我不知道要添加什么使它起作用。

PS对不起我的英语；/

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>

也许有人帮助我。

标签： javascriptslider

解决方案

<!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>

推荐阅读