圖像數組循環JS CSS

即時通訊試圖讓圖像被放置在側div所以h/w可以控制，我似乎得到它與jQuery 3.2.1的工作它只適用於jQuery 2.1.1 ，有沒有更好的方式來編寫這段代碼，我試圖通過簡單的點擊「下一個」div來改變圖像。圖像數組循環JS CSS

$(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>

來源

2017-05-26 evanrochon

什麼是問題與問題'javascript'？ – guest271314

圖像對於libs的最新視覺是不可見的。 – evanrochon

請參閱https://stackoverflow.com/questions/37738732/jquery-3-0-url-indexof-error/ – guest271314

使用負載的（）爲事件結合在3.x中除去它現在只用於獲取資源，第一個參數是要檢索的資源的URL。

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

「注意：在此之前的jQuery 3.0，事件處理套件也有一個方法叫.load的jQuery（）舊版本確定爲根據設定的傳遞給它的論據法的射擊。「

改爲使用（'load'）。

來源

2017-05-26 17:58:21 Taplar

替代

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

爲

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

來源

2017-05-26 17:58:52 guest271314

圖像數組循環JS CSS

回答

相關問題