从变量中选择前3个值，然后选择下一个3个值，依此类推

Question

我有一个图像的变量。我也有3个div's，我想把图片放进去。

var images = [
'dali.jpg',
'illusionisme.png',
'impresionisme.jpg',
'popart.jpg',
'abstracter.jpg',
'abstrat.jpg',
'concept.jpg',
'fingerpaint.jpg',
'flowers.jpg',
'graffiti.jpg',
'groovy.jpg',
'skelly.jpg',
'vangogh.jpg'
]

通过使用此代码，每个div都会得到一个随机图像，这很好，但不是我想要的。如何使用jQuery将前3个图像放入3个div中，然后将后3个图像放入div中？

$(".art").click(function(){
$(".art").each(function(){
    $(this).find("img").remove();
    $(this).prepend('<img src="assets/images/' + images[Math.floor(Math.random()*images.length)] + '">');
});

})；

<div class="art">    
<div class="art">    
<div class="art">     

Answer 1

不知道你在说什么，如果这不是你要找的，请详细说明。

http://jsfiddle.net/jFIT/c7U7q/1/

在代码现在只提供文本的情况下，您可以将该文本包装在<img src= />中以提供图像。

var images = [
'dali.jpg',
'illusionisme.png',
'impresionisme.jpg',
'popart.jpg',
'abstracter.jpg',
'abstrat.jpg',
'concept.jpg',
'fingerpaint.jpg',
'flowers.jpg',
'graffiti.jpg',
'groovy.jpg',
'skelly.jpg',
'vangogh.jpg'];

$(".art").click(function () {
   $(this).html(getNext3()); //images[Math.floor(Math.random()*images.length)]);
 });



 $('#startLoop').click(function () {
  loopImages();
 });

function loopImages(){
 var art = $('.art');
 art.fadeOut(1000, function () {
     art.html(getNext3()).fadeIn(1000, function() { loopImages(); });
 });
 }
var counter = 0;

function getNext3() {
  var imgs = "";
  //img src=...
  for (i = 0; i < 3; i++) {
      imgs += ' ' + images[counter];
      counter++;
  }
  return imgs;
 }

更新了(一次将3个div加载到3个div中)

http://jsfiddle.net/jFIT/c7U7q/7/

function setNext3() {
 var imgs = "";
 //img src=...
 for (i = 0; i < 3; i++) {
    imgs = images[counter];
    console.log(imgs);
    console.log(i);
    $("div.art:nth-child(" + (i + 1) + ")").html(imgs);
    console.log($("div.art:nth-child(" + i + ")"));
    counter++;
 }

}

Answer 2

您可以跟踪当前图像索引，然后添加数字以在每次单击时增加索引

html

<div class="art">
    <img data-imageindex="0" src="" />
</div>
<div class="art">
    <img data-imageindex="1" src="" />
</div>
<div class="art">
    <img data-imageindex="2" src="" />
</div>

js

var artLength = $(".art").length;
$(".art").click(function () {
    $(".art").each(function () {
        var $image = $(this).find("img");
        var nextImageIndex = $image.data("imageindex") + artLength;
        if (nextImageIndex >= images.length) {
            nextImageIndex -= images.length;
        }
        $image.data("imageindex", nextImageIndex).attr("src",
            "assets/images/" + images[nextImageIndex]);
    });
});

http://jsfiddle.net/44zB4/