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

需要进行一些更改，您可以像这样进行测试吗？请注意，我们将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);
})();

Answer 2

我不确定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 3

create table A (id int, valA real) insert into A(id, valA) VALUES (1, 1), (1, 2), (1, 3), (2, 1), (2, 2), (3, 0) create table B (id int, valB real) insert into B(id, valB) VALUES (1, 0), (2, 0), (3, 0) UPDATE B SET B.valB += (SELECT SUM(valA) FROM A WHERE A.id=B.id) select * from B是一种添加事件处理程序而不替换现有事件处理程序的更好方法。

addEventListener

根据经验，可以将window.addEventListener('load', e => { /* ... */ });替换为DOM中的任何on(blah)属性。

使用window.onload JavaScript添加幻灯片的上一个和下一个功能

3 个答案: