Question

我正在使用div，其中显示了四张图片

<script>
$(document).ready(function(){
    var img1 = "<?php echo $product['image1']; ?>";
    var img2 = "<?php echo $product['image2']; ?>";
    var img3 = "<?php echo $product['image3']; ?>";
    var img4 = "<?php echo $product['image4']; ?>";
    $("#imgTag").fadeOut(8000).attr('src',img2);
 });
</script>

<div id="imageDiv">
   <img src="<?php echo $product['image1']; ?>" id="imgTag" />
</div>

现在我不知道如何将img3 img4等其他图片放入src属性中，并使其在无限循环中可重复。有没有办法实现这个是jquery图像在无限迭代中变化？

Answer 1

试试这个......

＆＃13;

$(document).ready(function(){
    function blick_image(){
    img1 ="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png";
    img2 = "https://homepages.cae.wisc.edu/~ece533/images/baboon.png";
    img3 = "https://homepages.cae.wisc.edu/~ece533/images/boat.png";
    var images = [img1,img2,img3];//creates array
    images.forEach(function(element,index,arr){
    alert(element);
    });
    }
    setInterval(blick_image,1000);
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

在这里摆弄.. https://jsfiddle.net/fmmp74zv/

Answer 2

我认为这可以满足您的需求：

＆＃13;

$(document).ready(function(){
  var images = [
    1,
    "http://t2.uccdn.com/en/images/5/9/2/img_causes_of_fever_in_cats_9295_300_150.jpg",
    "http://www.jimvysearks.co.uk/blog/wp-content/uploads/2014/06/duck_surfing-300x150.jpg",
    "http://brightworkcoresearch.com/wp-content/uploads/2013/12/beauty-in-nature-178495_1280-300x150.jpg",
    "http://www.educationworld.com/sites/default/files/Sun1.jpg"
  ];
  $("#imgTag").attr("src",images[images[0]]);
  (function loopImages() {
    ++images[0];
    if (images[0] == images.length) {images[0] = 1;}
    $("#imgTag").fadeOut(8000,function(){
      $(this).attr("src",images[images[0]]).fadeIn(500,function(){loopImages();});
    });
  })();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="imageDiv">
  <img src="" id="imgTag" />
</div>

＆＃13;

＆＃13; jsfiddle：https://jsfiddle.net/9o2cw3hx/

我将您的个人img1-4 vars更改为包含所有图片的数组。
在索引[0]处，数组还包含当前图像的索引号。
每次调用loopImages()时（在src更改后），此索引号都会递增，以便选择下一张图片：++images[0];。
在到达阵列中的最后一个图像后，索引编号再次重置为第一个图像：if (images[0] == images.length) {images[0] = 1;}。
为了让第一次执行该功能，我把它包括在内：(function(){...})();。这称为IIFE。这样，您无需在声明后手动调用该函数。

我从您的HTML中移除了src，而是使用jQuery设置它，但显然没有必要按照您使用PHP设置它的方式（您的方式更好）。
我为了演示目的将图像更改为文字字符串，您可以将它们更改回PHP。

选项2

或者，您可以在调用函数时将index-number作为参数发送：

(function loopImages(i) {
  $("#imgTag").fadeOut(8000,function(){
    $(this).attr("src",images[i]).fadeIn(500,function(){loopImages(++i<images.length?i:0);});
  });
})(1);

不再需要存储索引号的images数组中的第一个索引，可以将其删除（请参阅下面的代码段）。
当函数再次调用自身时，用于递增索引号的两个单独行和if子句现在合并为一个内联ternary operator：loopImages(++i<images.length?i:0);
它的工作原理如下：
（1）它first increments i并检查该增量值是否仍然小于数组长度。
（2）如果是，则（递增）i一起发送 （3）如果不是，则发送0，将索引号重置为数组中的第一个图像。

就个人而言，我更喜欢这个选项，因为它更简洁。

＆＃13;

$(document).ready(function(){
  var images = [
    "http://t2.uccdn.com/en/images/5/9/2/img_causes_of_fever_in_cats_9295_300_150.jpg",
    "http://www.jimvysearks.co.uk/blog/wp-content/uploads/2014/06/duck_surfing-300x150.jpg",
    "http://brightworkcoresearch.com/wp-content/uploads/2013/12/beauty-in-nature-178495_1280-300x150.jpg",
    "http://www.educationworld.com/sites/default/files/Sun1.jpg"
  ];
  $("#imgTag").attr("src",images[0]);
  (function loopImages(i) {
    $("#imgTag").fadeOut(8000,function(){
      $(this).attr("src",images[i]).fadeIn(500,function(){loopImages(++i<images.length?i:0);});
    });
  })(1);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="imageDiv">
  <img src="" id="imgTag" />
</div>

＆＃13;

＆＃13; jsfiddle： https://jsfiddle.net/9o2cw3hx/1/

使图像通过jquery移动自己

2 个答案:

选项2