В JavaScript изображения карусель


Я написал следующий код для создания простого карусель изображений, который показывает несколько изображений одновременно в том же порядке, но начиная с другой позиции, когда "следующий" или "предыдущий" кнопки.

Этот код работает, но это противоречит принципам программирования и алгоритмы?

Есть ли лучшее решение?

var images = [
   "1.jpg", 
   "2.jpg", 
   "3.jpg"
];
let slider = document.getElementById("slider");
function next(){
  images.forEach((item , index)=>{
    if(slider.getAttribute("src") == item)
      if(index != images.length-1)
        nextIndex = index+1;
      else
       nextIndex = 0;
    });
   slider.setAttribute("src",images[nextIndex]);  
}
function prev(){
  images.forEach((item , index)=>{
    if(slider.getAttribute("src") == item)
      if(index != 0)
         prevIndex = index-1;
      else
        prevIndex = images.length-1;
    });
   slider.setAttribute("src",images[prevIndex]);  
}
<div>
  <button onClick = "prev()"> Prev </button>
  <img id="slider" src="1.jpg" 
    width="200px" height="100px"/>
  <button onClick = "next()"> Next </button>
</div>



494
-1
задан 8 февраля 2018 в 11:02 Источник Поделиться
Комментарии
1 ответ

Есть несколько проблем с вашим кодом прямо сейчас.


  1. Не создавать глобальные переменные. nextIndex и prevIndex оба глобалы, что неявно создается при первом назначении к ним.

  2. Не злоупотреблять не используя брекеты на if заявления. Это прекрасно, чтобы пропустить их по очень простой заявление (если это разрешено в вашем стиле руководства), но гнездование нескольких ifы без брекетов-это рецепт для катастрофы.

    // Much safer 
    if (slider.getAttribute("src") == item) {
    if(index != images.length-1)
    nextIndex = index+1;
    else
    nextIndex = 0;
    }

  3. Не использовать setAttribute / getAttribute если вы обращаетесь к стандартной свойство элемента. slider.src короче и легче читать, чем slider.getAttribute('src').

  4. Рассмотрим, как сделать код более модульным. Что произойдет, если теперь вы хотите два ползунка на странице? В идеале, она должна быть просто другой строки кода, чтобы добавить функциональность (или, может быть, даже больше никаких строк кода!)

  5. Рассмотрим предзагрузки изображений. TimSparrow упоминали об этом в комментариях - с ваш текущий код следующего изображения не будут загружаться до тех пор, пока пользователь нажимает на кнопку Далее. Это может привести в плохой опыт работы на медленных соединениях.


Есть еще несколько вещей, которые я мог бы сказать, но я считаю, что было бы более полезным для просто предоставить альтернативную реализацию.

Эта реализация имеет несколько преимуществ:


  1. Вы можете просто добавить еще один image-slider див, куда вы хотите другой набор образов.

  2. С помощью внутренней скрытой div для хранения изображений, вы автоматически получаете предустановленных изображений.



function createSlider(container) {
const images = container.querySelectorAll('.images > img');

const displayImage = container.querySelector('[data-display]')

// State
let imageIndex;

function setImage(index) {
imageIndex = index;
displayImage.src = images[index].src;
}

// Show the first image initially
setImage(0);

// Button listener
container.addEventListener('click', event => {
if (event.target.hasAttribute('data-prev')) {
setImage(imageIndex === 0 ? images.length - 1 : imageIndex - 1)
} else if (event.target.hasAttribute('data-next')) {
setImage(imageIndex === images.length - 1 ? 0 : imageIndex + 1)
}
});
}

document.querySelectorAll('.image-slider').forEach(createSlider);


.image-slider .images {
display: none;
}

<div class="image-slider">
<div class="images">
<img src="https://placeimg.com/200/100/animals">
<img src="https://placeimg.com/200/100/arch">
<img src="https://placeimg.com/200/100/nature">
</div>
<button data-prev>Prev</button>
<img data-display width="200px" height="100px">
<button data-next>Next</button>
</div>



3
ответ дан 8 февраля 2018 в 08:02 Источник Поделиться