使图像通过jquery移动
使图像通过jquery移动
提问于 2017-01-08 09:19:31
我使用的是一个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，即图像在无限迭代中发生变化的jquery？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-08 10:44:34
我觉得这能做你想做的事
$(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();});
});
})();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="imageDiv">
<img src="" id="imgTag" />
</div>jsfiddle: https://jsfiddle.net/9o2cw3hx/
- 我将您的单个
img1-4vars更改为包含所有图像的数组。 - 在索引
[0]中，数组还包含当前图像的索引号. - 每当
loopImages()被调用时(在src被更改之后)，这个索引号就会增加，以便选择下一个图像：++images[0];。 - 到达数组中的最后一个图像后，索引号将再次重置为第一个图像：
if (images[0] == images.length) {images[0] = 1;}。 - 为了第一次执行该函数，我将其括起来如下：
(function(){...})();。这叫做生平。这样，您就不必在声明函数之后手动调用它。
我从HTML中删除了src，而是用jQuery来设置它，但是这显然不是用jQuery设置它的方式(您的方式更好)。
为了演示目的，我将图像更改为文字字符串，您可以将它们更改为PHP。
备选案文2
或者，在调用函数时，可以将索引号作为参数发送：
(function loopImages(i) {
$("#imgTag").fadeOut(8000,function(){
$(this).attr("src",images[i]).fadeIn(500,function(){loopImages(++i<images.length?i:0);});
});
})(1);images数组中存储索引号的第一个索引不再必要，可以删除(请参阅下面的代码片段)。- 当函数再次调用自身时，用于递增索引号的两行和if-子句现在组合为一个内联三元算子：
loopImages(++i<images.length?i:0);。 它的工作方式如下： (1) It 第一增量i并检查该增量值是否仍然小于数组长度。 如果是(2)，则发送(增量)i。 如果不是(3)，则发送0，将索引号重置为数组中的第一个图像。
就我个人而言，我更喜欢这个选项，因为它更简洁。
$(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);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="imageDiv">
<img src="" id="imgTag" />
</div>jsfiddle:https://jsfiddle.net/9o2cw3hx/1/
Stack Overflow用户
发布于 2017-01-08 10:10:20
就像这样..。
$(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);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41531189
复制相关文章
相似问题
腾讯云开发者
