Блог

Главная - Вопросы по программированию - Попытка создать слайдер изображения без jQuery

Попытка создать слайдер изображения без jQuery

#javascript

#javascript

Вопрос:

Я пытаюсь заставить этот слайдер изображения работать без jQuery; используя значки font awesome в качестве кнопок next и previous. Когда я изменяю значение imgCounter переменной, изображение меняется, однако я не могу заставить его работать должным образом.

 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;
}; 
 <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>

Комментарии:

1. Взгляните на это: jsfiddle.net/t2emherc

2. можете ли вы объяснить, что у вас не работает? Просто сказать, что он не работает должным образом, не проясняет, какие проблемы у вас на самом деле.

3. извините, когда я нажал на кнопку далее, это не изменило изображения.

Ответ №1:

Вот пример фреймворка, с которым можно поиграть:

 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>

Ответ №2:

Я не мог действительно следовать вашему коду, но я создал чистое решение JavaScript, CSS, HTML. Посмотрите на этот JSBin, чтобы вы могли увидеть его в действии: https://jsbin.com/kixofal/5/edit?html ,css,js, вывод

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 или какие-либо другие внешние модули, и оно скорее ориентировано на то, чтобы позволить графическому процессору отображать смену слайдов (пытаясь оптимизировать анимацию, чтобы каждое устройство могло отображать ее плавно).

Метки: