Question

我有这个带图像的变量。我还有3个div，其中我想放置图像。

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中，然后将div中的第3个图像放入其中？

$(".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到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/

从变量中选择前3个值，然后选择接下来的3个等

2 个答案: