主页 / 问题 / 875687
Accepted
sergey - dev
Asked:2020-08-31 15:57:29 +0000 UTC2020-08-31 15:57:29 +0000 UTC

使用键盘在轮播中切换活动滑块

  • 772

我正在制作一个旋转木马，它使用键盘上的箭头和按钮移动滑块，它还有待完成，以便当您在键盘上单击左或右时，选择相应的滑块并以绿色突出显示，如何实现? 完整代码：

var lis = document.querySelectorAll('.images li');
var focused = document.querySelectorAll('.focused');



var width = 124;
var count = 1;
var left = 0;

var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('.images li');

var position = 0;

function prev() {

  left = left + width;
  if (left > 0) {
    left = -868;
  }
  list.style.marginLeft = left + 'px';
};

function next() {

  left = left - width;
  if (left < -868) {
    left = 0;
  }
  list.style.marginLeft = left + 'px';
};

function eventKey(e) {
  switch (e.keyCode) {

    case 37:
      prev()
      break;

    case 39:
      next()
      break;

  }
}
addEventListener("keydown", eventKey);
ul {
  width: 9999px;
  transition: .3s ease;
  padding: 0;
}

li {
  display: inline-block;
  width: 90px;
  height: 200px;
  border: 2px solid #000;
  margin: 0 20px;
}

.arrow {
  width: 50px;
  height: 50px;
  margin: 70px 0 0 0;
  background: grey;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  z-index: 999;
  display: block;
  float: left;
}

.focused {
  background-color: green;
}

img {
  display: block;
}

.wrap_ul {
  overflow: hidden;
}

#carousel {
  max-width: 600px;
  height: 200px;
  margin: 0 auto;
  float: left;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

</head>

<body>

  <button class="arrow prev" onclick="prev()">⇦</button>
  <div id="carousel" class="carousel">
    <div class="wrap_ul">
      <ul class="images">
        <li class="focused">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
    </div>
  </div>
  <button class="arrow next" onclick="next()">⇨</button>


</body>

</html>

javascript

1 个回答

  1. Best Answer

    var lis = document.querySelectorAll('.images li');
var focused = document.querySelectorAll('.focused');



var width = 124;
var count = 1;
var left = 0;

var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('.images li');
let current = 0;

var position = 0;

function prev() {

  left = left + width;
  listElems[current].style.background = "white";
  current--;
  if (current < 0) {
    left = -868;
    listElems[0].style.background = "white";
    current = listElems.length - 1;
    listElems[current].style.background = "green";
  }
  listElems[current].style.background = "green";
  list.style.marginLeft = left + 'px';
};

function next() {

  left = left - width;
  listElems[current].style.background = "white";
  current++;
  if (current > listElems.length - 1) {
    left = 0;
    listElems[current - 1].style.background = "white";
    current = 0;
    listElems[current].style.background = "green";
  }
  listElems[current].style.background = "green";
  list.style.marginLeft = left + 'px';
};

function eventKey(e) {
  switch (e.keyCode) {

    case 37:
      prev()
      break;

    case 39:
      next()
      break;

  }
}
addEventListener("keydown", eventKey);
    ul {
  width: 9999px;
  transition: .3s ease;
  padding: 0;
}

li {
  display: inline-block;
  width: 90px;
  height: 200px;
  border: 2px solid #000;
  margin: 0 20px;
}

.arrow {
  width: 50px;
  height: 50px;
  margin: 70px 0 0 0;
  background: grey;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  z-index: 999;
  display: block;
  float: left;
}

.focused {
  background-color: green;
}

img {
  display: block;
}

.wrap_ul {
  overflow: hidden;
}

#carousel {
  max-width: 600px;
  height: 200px;
  margin: 0 auto;
  float: left;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

</head>

<body>

  <button class="arrow prev" onclick="prev()">⇦</button>
  <div id="carousel" class="carousel">
    <div class="wrap_ul">
      <ul class="images">
        <li class="focused">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
    </div>
  </div>
  <button class="arrow next" onclick="next()">⇨</button>


</body>

</html>

    • 2

相关问题