如何使用jQuery淡化两个图像之间的旋转? 比如说。
<img src="image01.jpg" />
<img src="image02.jpg" />
我喜欢这些图像在每个之间淡入/淡出2秒。
谢谢!非常感激。 :)
答案 0 :(得分:7)
我敲了一个简单的例子。
<div id="imageSwap">
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
setImageOne();
});
function setImageOne() {
$('#imageSwap').fadeIn(500).html('<img src="image01.jpg" />').delay(2000).fadeOut(500, function () { setImageTwo(); });
}
function setImageTwo() {
$('#imageSwap').fadeIn(500).html('<img src="image02.jpg" />').delay(2000).fadeOut(500, function () { setImageOne(); });
}
</script>
答案 1 :(得分:2)
将你的html重写为
<div>
<img class="current slide" src="image01.jpg" style="position:absolute;"/>
<img class="slide" src="image02.jpg" style="position:absolute;display:none"/>
<img class="slide" src="image03.jpg" style="position:absolute;display:none"/>
<img class="dummy" src="image01.jpg" style="visibility:none;"/>
</div>
为了清晰起见,我添加了第三张图片。
添加像这样的jquery函数
function nextSlide() {
jQuery('.slide.current').each(function() {
var next = jQuery(this).next('.slide');
if (!next.size()) next = jQuery(this).siblings('.slide').eq(0);
jQuery(this).fadeOut().removeClass('current');
next.fadeIn().addClass('current');
});
slidetimer=setTimeout('nextSlide()',slidespeed);
}
在你的基础javascript中,添加
var slidespeed = 2000;
var slidetimer = null;
jQuery(document).ready(function() {
nextSlide()
});
我没有像这样测试这个,所以可能会有错字。 周围的div确保所有幻灯片图像都位于div所在的位置,因为它们的位置是绝对的。虚拟图像不可见,但确实填满了使周围的div实际环绕所有图像所需的空间。你可能不需要这个。
您的图像应具有相似的尺寸,或者至少假人应该与最大的图像一样大。
$ 2C, * -pike
答案 2 :(得分:0)
我一直在寻找一种在网络摄像头图像之间淡入淡出的方法,而不需要在显示的图像之间显示这一点。我正在做的是将新图像设置为背景图像,淡出封闭图像,将背景图像设置为封闭图像,然后再次显示封闭图像。
你可以做点什么
我想出了这个。
<style type="text/css">
#webcamImageDiv {
text-align: center;
background-image: url('webcam.jpg');
background-position: top center;
background-repeat: no-repeat;
}
</style>
<div id="webcamImageDiv">
<img id="webcamImageImg" src="webcam.jpg" alt="Image Not Available" />
</div>
<script type="text/javascript">
var refreshMillis = 10000;
function refreshWebcam() {
// set the div to the height of the image
$("#webcamImageDiv").height( $("#webcamImageImg").height() );
// get the path to the new image
// (in your case, your other image)
var newImg = "webcam.jpg?t=" + new Date().getTime();
// set the background of the div
$("#webcamImageDiv").css("background-image","url('" + newImg + "')");
// fade out the image
$("#webcamImageImg").fadeOut(500, function() {
// update the img tag, show the image
$("#webcamImageImg").removeAttr("src").attr("src", newImg).show();
// do it again
window.setTimeout(getWebcam, refreshMillis);
});
}
$(document).ready( function() {
window.setTimeout(refreshWebcam, refreshMillis);
});
</script>
答案 3 :(得分:0)
你可以不用jquery来做。只有css: 在图像之间冷却淡出
.fade img {
transition: all .8s;
max-width: 200px;
}
.fade:hover img:nth-child(2) {
opacity: 0;
}
.fade img:first-child {
position: absolute;
z-index: -1;
}
<div class='fade'>
<img src="https://image.freepik.com/free-vector/software-logo_1103-316.jpg">
<img src='https://image.freepik.com/free-vector/m-letter-logo-template_1061-150.jpg'>
</div>
答案 4 :(得分:-1)
使用.animate和.css代替
更好地控制时间安排这将创建一个软交叉渐变的卷轴。
在每个循环中,它将前面的不可见图像移动到开始动画不透明度为100.一旦完成,之前的可见图像就会设置为不透明度0并移到前面等等。
[nameLabel, numberLabel, informationLabel].forEach(contentView.addSubview)