修改

Question

我试图让这个图片滑块在没有jQuery的情况下工作;使用字体真棒图标作为我的下一个和上一个按钮。当我更改imgCounter变量的值时，图像会发生变化，但我无法正常工作。

＆＃13;

var $ = function(id) {
  return document.getElementById(id);
};

var imgCounter = 0;

var next = function() {

  if (imgCounter < 6) {
    imgCounter++;
  } else {
    imgCounter = 0;
  }
}

window.onload = function() {
  // where image will display
  var imageNode = $('display');
  var slideNode = $('slides');
  // gathers all the images in an array
  var slides = document.getElementsByClassName('img');
  //to target a specific index
  imgCounter = imgCounter % slides.length;

  var image = slides[imgCounter];
  //to switch the current photo with the next one in the array
  imageNode.src = image.src;
  $('right').onclick = next;
};

＆＃13;

<section id="slider">
  <img id="display" src="" alt="display" />

  <i id="left" class="fa fa-arrow-left fa-4x" aria-hidden="true"></i>
  <i id="right" class="fa fa-arrow-right fa-4x" aria-hidden="true"></i>
  <div id="slides">
    <img class="img" src="images/20anniversary-large.png" alt="anniversary" />
    <img class="img" src="images/53rd.jpg" alt="53rd" />
    <img class="img" src="images/Award.png" alt="Award">
    <img class="img" src="images/rotator-03-lg.jpg" alt="rotator-03-lg" />
    <img class="img" src="images/rotator01lg.jpg" alt="rotator01lg" />
    <img class="img" src="images/rotator-02-lg.jpg" alt="rotator-02-lg" />
  </div>
</section>

＆＃13;

Answer 1

我无法真正遵循您的代码，但我创建了一个纯JavaScript，CSS，HTML解决方案。请参阅此JSBin，以便您可以看到它的实际效果：https://jsbin.com/kixofal/5/edit?html,css,js,output

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="slider" data-showing="2">
    <div class="slide image-1"></div>
    <div class="slide image-2"></div>
    <div class="slide image-3"></div>
  </div>
  <button class="button previous">left</button>
  <button class="button next">right</button>
</body>
</html>

JAVASCRIPT：

function initSlider() {
  var slider = document.querySelector("#slider");
  var previousButton = document.querySelector(".previous");
  var nextButton = document.querySelector(".next");
  var slides = slider.querySelectorAll(".slide");
  var animationDuration = 700;

  // put slides in it's initial place
  var currentIndex = slider.dataset.showing * 1;
  [].forEach.call(document.querySelectorAll(".slide"), function(elem, i){
    i = i+1; // index starts at 0
    if(i === currentIndex) return;
    elem.style.transform = i < currentIndex ? "translateX(-100%)" : "translateX(100%)";
  });

  // prevent user from bursting through the slides.
  function onAnimationEnd() {
    clearTimeout(slider.isMoving);
    slider.isMoving = undefined;
  }

  function moveSlide(animationName){
    var direction = 0;
    if(animationName === "left") direction = -1;
    if(animationName === "right") direction = 1;

    return function() {
      // check if it is currently moving
      if(!isNaN(slider.isMoving)) return;
      // some old devices might skip a few animationEnd events
      // setTimeout is used as a last reource to prevent that to happen.
      slider.isMoving = setTimeout(onAnimationEnd, animationDuration + 50);

      var current = slider.dataset.showing * 1;
      var next = current + direction;
      if(next < 1) next = 3;
      if(next > slides.length) next = 1;

      var currentSlide = slider.querySelector(".image-" + current);
      var nextSlide = slider.querySelector(".image-" + next);

      currentSlide.style.animationName = "slide-out-" + animationName;
      nextSlide.style.animationName = "slide-in-from-" + animationName;

      slider.dataset.showing = next;
    };
  }

  previousButton.addEventListener("click", moveSlide("left"), false);
  nextButton.addEventListener("click", moveSlide("right"), false);
  slider.addEventListener("animationend", onAnimationEnd, false);
}

window.addEventListener("load", initSlider, false);

CSS：

#slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* viewport units to keep the ratio */
  height: 50vw;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: 50% 50%;

  animation-fill-mode: forwards;
  animation-duration: 700ms;
  animation-timing-function: ease;  
}

.image-1 {
  background-image: url("http://www.freedigitalphotos.net/images/img/homepage/87357.jpg");
}

.image-2 {
  background-image: url("http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg");
}

.image-3 {
  background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
}

// animations

@keyframes slide-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes slide-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes slide-in-from-left {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slide-in-from-right {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

修改

我忘了提及，这个解决方案缺少浏览器前缀，我避免尝试保持解决方案清洁。

此外，此解决方案不使用jQuery或任何其他外部模块，而是专注于允许GPU渲染幻灯片更改（尝试优化动画以便每个设备都可以平滑地渲染它）。

Answer 2

以下是一个可以使用的示例框架：

var $ = function(query) {
  return document.querySelector(query);
};

var $all = function(query) {
  return document.querySelectorAll(query);
};

var imageSlider = (function() {

  var imgCounter = 0;

  var next = function() {
    imgCounter++;
    if (imgCounter >= $all('.img').length) {
      imgCounter = 0;
    }
    changeImage();
  }

  var changeImage = function() {
    var imageNode = $('#display');
    var slides = $all('.img');
    var image = slides[imgCounter];
    imageNode.src = image.src;
  }

  return {
    changeImage: changeImage,
    next: next
  }
})();

window.onload = function() {
  imageSlider.changeImage();
  $('#right').onclick = function() {
    imageSlider.next();
  }
};

div#slides > img {
  display: none;
}

<section id="slider">
  <i id="left" class="fa fa-arrow-left fa-4x" aria-hidden="true">Left</i>
  <img id="display" src="" alt="My ducks slider" />
  <i id="right" class="fa fa-arrow-right fa-4x" aria-hidden="true">Right</i>
  <div id="slides">
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/220px-Bucephala-albeola-010.jpg" alt="anniversary" />
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Mallard_drake_.02.jpg/220px-Mallard_drake_.02.jpg" alt="53rd" />
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mandarin.duck.arp.jpg/220px-Mandarin.duck.arp.jpg" alt="Award">
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Mallard_drake_and_blue_mood.jpg/220px-Mallard_drake_and_blue_mood.jpg" alt="rotator-03-lg" />
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Ducks_in_the_ponds.JPG/220px-Ducks_in_the_ponds.JPG" alt="rotator01lg" />
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Parrulo_-Muscovy_duckling.jpg/220px-Parrulo_-Muscovy_duckling.jpg" alt="rotator-02-lg" />
  </div>
</section>

试图在没有jQuery的情况下创建图像滑块

2 个答案:

修改