图像数组循环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

回答

相关问题