图像数组循环JS CSS

时间:2017-05-26 17:46:25

标签: javascript css arrays loops jquery-3

我试图将图像放在div的旁边,这样h / w就可以控制了,我似乎可以使用jquery 3.2.1它只适用于jquery 2.1.1,有没有更好的编写这段代码的方式,我试图简单点击“下一步”div并用循环更改图像。

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

2 个答案:

答案 0 :(得分:0)

在3.X中删除了使用load()作为事件绑定。它现在仅用于获取资源,第一个参数是要检索的资源的URL。

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

“注意:在jQuery 3.0之前,事件处理套件还有一个名为.load()的方法。旧版本的jQuery根据传递给它的参数集确定要触发的方法。”

使用on('load')代替。

答案 1 :(得分:0)

替代

public PartialView GetPdfReport(string Id)
{
    var model = PDFResponseModel 
    {
        ReportFileName = Server.MapPath("~/Reports/Testfile.pdf")
    };
    return PartialView(model);
}

代表

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