Question

图片名称具有以下结构：

16-04-2015
15-04-2015
14-04-2015_1
14-04-2015_2
13-04-2015
12-04-2015
11-04-2015

图像被放置在项目中的一个文件夹中，并以图像日期作为名称加载。下一个和前一个按钮有两个按钮。单击按钮时，将根据日期显示相应的图像。如何实现？

Answer 1

这是工作解决方案，但没有_1和_2，因为日期代码不知道是否有两个图像具有相同的日期。

＆＃13;

var div = $('div');
var now = new Date();
function formatDate(date) {
  return  (date.getMonth()+1) + '-' + date.getDate() + '-' + date.getFullYear();
}
div.html(formatDate(now));
$('#next').click(function() {
  var date = new Date(div.text());
  date.setDate(date.getDate() + 1);
  div.html(formatDate(date));
});
$('#prev').click(function() {
  var date = new Date(div.text());
  date.setDate(date.getDate() - 1);
  div.html(formatDate(date));
});

＆＃13;

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div></div>
<button id="next">next</button>
<button id="prev">prev</button>

＆＃13;

您可以使用src属性img.attr('src')和img.attr('src', date)

代替div html

Answer 2

它的可能性和所有技巧是解析这些图像名称并将它们设置为id并对它们进行排序。

由于您没有给我们任何代码示例，因此这是一个通用轮播，它将在日期顺序和索引顺序中显示“images”（示例中为div.image）。

$(function(){ // On DOM ready
  
  //Define all needed:
  var $btn_prev = $('button#prev'),
      $btn_next = $('button#next'),
      $container = $('.container'),
      imageSelector = 'div.image',
      firstExposedImage = 0,
      imageDates   = [];
    
  //Prepare sorted image array:
  $container.find(imageSelector).each(function(){
     idAtt = $(this).attr('id').split('_');
     i     = 1;
     if (idAtt.length === 2) { i = parseInt(idAtt[1]); }
     newId = idAtt[0]+"_"+i;
     idAtt = idAtt[0];
     numbers = idAtt.match(/\d+/g); 
     date = new Date(numbers[2], numbers[0]-1, numbers[1]);
     imageDates.push({ id:"#"+newId, date: date, i:i});
     $(this).attr('id',newId);
  });
    
  //Sorting function:
  imageDates.sort(function(a,b){
      return a.date - b.date || a.i - b.i;
  });
    
  //Add position to container:
  $container.data('pos', firstExposedImage);
    
  //Expose First image:
  console.log(imageDates[firstExposedImage].id);
  $(imageDates[firstExposedImage].id).show();  
    
  //Button behavior:
  $btn_prev.click(function(){
      expose_image(-1);
  });
  $btn_next.click(function(){
      expose_image(1);
  });
    
  //Toggle images function:
  function expose_image(move) {
      cur = $container.data('pos');
      target = cur + move;
      if (target < 0) target = imageDates.length-1;
      if (target > imageDates.length-1) target = 0;
      $container.data('pos', target);
      $(imageSelector + ":visible" ).hide();
      $(imageDates[target].id).show();
  }
  
  
});

div {
  width:200px;
  height:160px;
}
div.image {
  display:none;
  background-color:blue;
  color:white;
  font-size:26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='container'>
  <div class='image' id='14-04-2005'>14-04-2005</div>
  <div class='image' id='17-04-2005'>17-04-2005</div>
  <div class='image' id='14-07-2006_3'>14-07-2006_3</div>
  <div class='image' id='14-02-2001'>14-02-2001</div>
  <div class='image' id='13-04-2012'>13-04-2012</div>
  <div class='image' id='14-07-2006_2'>14-07-2006_2</div>
  <div class='image' id='14-07-2006_1'>14-07-2006_1</div>
</div>
<button id='prev'>prev</button>
<button id='next'>next</button>

如何根据日期显示图像

2 个答案: