Добавить предыдущие и следующие функции для слайд-шоу с помощью window.onload JavaScript

Question

Я хочу создать программу JavaScript, которая позволит пользователю переключаться между изображениями с помощью кнопок «предыдущий» и «следующий».Но я не могу использовать window.onload для загрузки следующего изображения, потому что window.onload перезаписывает предыдущий window.onload.Я хочу знать, существует ли какое-либо решение, чтобы заставить window.onload работать с двумя функциями одновременно.Если window.onload не может быть использован для такой программы, вы можете предложить мне другое решение.Спасибо.

var i =0;
var image = [];
 image[0]= 'image.jpg';
 image[1]= 'image2.jpg';
 image[2]= 'panther.jpg'
function next(){
    document.slide.src = image[i];
    if(i<image.length-1){
     i++;
    }
    else{
    i=0;
    }
document.getElementById('bouton1').addEventListener('click',next);
}
function previous(){
    document.slide.src = image[i];
    if(i>0){
    i--;    
    }
    else{
    i=image.length-1;   
    }
document.getElementById('bouton2').addEventListener('click',previous);
}

window.onload =  next;
    window.onload = previous;

Answer 1

Я не совсем уверен в вашей идее window.onload, если вы хотите предварительно загрузить изображения (чтобы пользователю не нужно было ждать загрузки изображения при нажатии кнопок ...), чем вы могли бы использовать new Image() и что-то вроде:

const EL_slide = document.getElementById("slide");
const EL_prev = document.getElementById('prev');
const EL_next = document.getElementById('next');
const image = [
  '//placehold.it/800x600/0bf?text=1',
  '//placehold.it/800x600/f0b?text=2',
  '//placehold.it/800x600/0fb?text=3'
];
const n = image.length;
let i = 0;

// Preload images
image.forEach(src => { 
  var img = new Image();
  img.src = src;
});

// Animation logic
function anim() {
  if((/prev|next/).test(this.id)) i = this.id === "next" ? ++i : --i;
  i = i<0 ? n-1 : i%n; // Index fixer (prevents out of bound index)
  EL_slide.style.backgroundImage = `url('${image[i]}')`
}

// Events
[EL_prev, EL_next].forEach(EL => EL.addEventListener('click', anim));

// Load first!
anim(); 

#slide {
  height: 70vh;
  transition: 0.3s;
  background: none 50% 50% / cover no-repeat;
}

<button id="prev">&larr;</button>
<button id="next">&rarr;</button>
<div id="slide"></div>

и просто поместите свой Javascript прямо перед закрывающим тегом </body>.

Answer 2

addEventListener - лучший способ добавления обработчика событий без замены существующего.

window.addEventListener('load', e => { /* ... */ });

Как правило, любые атрибуты on(blah) в DOM можно заменить на addEventListener(blah, ...).

Answer 3

Требуется пара изменений, можете ли вы проверить это следующим образом.Обратите внимание, что мы изменили onload, чтобы присоединить слушателей.Смотрите комментарий.

var i =0;
var image = [];
 image[0]= 'image.jpg';
 image[1]= 'image2.jpg';
 image[2]= 'panther.jpg'
function next(){
    document.slide.src = image[i];
    if(i<image.length-1){
     i++;
    }
    else{
    i=0;
    }

}
function previous(){
    document.slide.src = image[i];
    if(i>0){
    i--;    
    }
    else{
    i=image.length-1;   
    }

}

// This is window.onload
(function(){
  // Move calls to attach event listeners here
  document.getElementById('bouton2').addEventListener('click',previous);
  document.getElementById('bouton1').addEventListener('click',next);
})();