Bild-Array-Schleife JS CSS

Question

Ich versuche, die Bilder in der Seite div so h/w kann gesteuert werden, und ich kann scheinen, es mit jquery 3.2.1 funktioniert es funktioniert nur mit jquery 2.1.1 , gibt es eine bessere Möglichkeit, diesen Code zu schreiben, ich habe versucht, einen einfachen Klick "nächste" div und Bild mit Schleife zu ändern.

$(function() { 
 
var images = [ 
 
    "http://placehold.it/300x150/f0f&text=1" 
 
    ,"http://placehold.it/300x150/cf5&text=2" 
 
    ,"http://placehold.it/300x150/b15&text=3" 
 
    ,"http://placehold.it/300x150/c59&text=4" 
 
    ,"http://placehold.it/300x150/ac2&text=5" 
 
    ,"http://placehold.it/300x150/bb5&text=6" 
 
]; 
 

 
// ====================================== 
 

 
var tot = images.length; 
 
var c = 0; // current image 
 

 
function loadImage(){ 
 
    $("<img/>").attr("src",images[c]).load(function() { 
 
     $('#gallery').html(this); 
 
    }); 
 
} 
 
loadImage(); // for the page load 
 

 
$('#prev').click(function(){ 
 
    id=this; c--; 
 
    c=c==-1?tot-1:c%tot; 
 
    loadImage(); 
 
}); 
 

 
$('#next').click(function(){ 
 
    id=this; c++; 
 
    c=c==-1?tot-1:c%tot; 
 
    loadImage(); 
 
}); 
 
});

#gallery{ 
 
    width:150px; 
 
    height:50px; 
 
    background:#ddd; 
 
    margin-top:8px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pagination"> 
 
    <div id="prev" class="btn" style="position:">PREV</div> 
 
    <div id="next" class="btn" style="position:">NEXT</div> 
 
</div> 
 
    
 
<div id="gallery"> 
 
    
 
    
 
</div>

Answer 1

Die Verwendung von load() als ein Ereignis Bindung wurde in 3.X entfernt Es dient nur zum Abrufen von Ressourcen, wobei der erste Parameter die URL der abzurufenden Ressource ist.

http://api.jquery.com/load/

„Hinweis: Vor dem jQuery 3.0, die Event-Handling-Suite hatte auch eine Methode namens .load() ältere Versionen von jQuery, der Methode bestimmt auf dem Satz von gebenen Argumenten zu feuern basierte.. "

Verwenden Sie stattdessen ('laden').

Answer 2

Ersatz

$("<img/>").attr("src",images[c]).on("load", function() { 
    $('#gallery').html(this); 
}); 

für

$("<img/>").attr("src",images[c]).load(function() { 
    $('#gallery').html(this); 
});