HTML CSS 幻灯片过渡
HTML CSS Slideshow Transitions
我为简单的 HTML 幻灯片写了一个简单的 JavaScript 代码;图片在一个数组中,每 5 秒更改一次。
我想要在当前图像的第 4 秒将其过渡到 0 opacity
over 1 second
,这意味着一旦图像已经过渡并且不再可见,应该加载下一个, 以便在所有图像之间创建更平滑的过渡。
我的代码如下
CSS
#slider {
opacity: 1;
transition: opacity 1s;
border-radius: 10px;
box-shadow: -5px 7px 5px #888888;
width: 99vw;
height: 470px;
align: middle;
}
#slider.fadeOut {
opacity: 0;
}
HTML
<img id="slider" src="Images/image1">
JavaScript
var imgArray = [
'Images/image1.jpg',
'Images/image2.jpg',
'Images/image3.jpg',
'Images/image4.jpg',
'Images/image5.jpg',
'Images/image6.jpg',
'Images/image7.jpg',
'Images/image8.jpg'
],
curIndex = 0;
imgDuration = 5000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function() {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
},1000);
curIndex++;
if (curIndex == imgArray.length) {
curIndex = 0;
}
setTimeout(slideShow, imgDuration);
}
slideShow();
问题是过渡是跳跃的,所以图像会在 1 秒内淡出,然后同一图像仍在显示,然后下一个图像将在没有过渡的情况下加载。
我确定这是一个我忽略的简单修复。
发生这种情况是因为当您在图像上更改 src
时,它仍然必须加载图像文件,并且您不会等待它发生才能继续其余过程。
您的方法应该加载图像并在完成时使用回调函数,然后执行剩余的过程。
更新:
所以我知道您的示例使用 CSS 转换,而这个使用 jQuery 但我希望您看到链接回调函数的好处。如果你仔细看这个,你可以看到 img 请求是如何在淡出完成之前发出的,然后脚本加载 img,只有当加载完成时,它才会将新图像放入容器中并淡出然后一旦淡入,下一个回调将再次调用 setTimeout 以使其继续运行。这样您的所有操作都会按顺序发生。
var imgArray = [
'http://www.fillmurray.com/200/300',
'http://www.fillmurray.com/300/200',
'http://www.fillmurray.com/500/200',
'http://www.fillmurray.com/300/600',
'http://www.fillmurray.com/350/200',
'http://www.fillmurray.com/300/350',
],
curIndex = 0;
imgDuration = 5000;
function slideShow() {
$("#slider").fadeOut('slow',function() {
var img = $("<img />").attr('src', imgArray[curIndex])
.on('load', function() {
$("#slider").html(img).fadeIn('normal',function(){
curIndex++;
if (curIndex == imgArray.length) {
curIndex = 0;
}
setTimeout(slideShow, imgDuration);
});
});
});
}
slideShow();
#slider {
border-radius: 10px;
box-shadow: -5px 7px 5px #888888;
}
#slider img {
width: 99vw;
height: 470px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider"></div>
我为简单的 HTML 幻灯片写了一个简单的 JavaScript 代码;图片在一个数组中,每 5 秒更改一次。
我想要在当前图像的第 4 秒将其过渡到 0 opacity
over 1 second
,这意味着一旦图像已经过渡并且不再可见,应该加载下一个, 以便在所有图像之间创建更平滑的过渡。
我的代码如下
CSS
#slider {
opacity: 1;
transition: opacity 1s;
border-radius: 10px;
box-shadow: -5px 7px 5px #888888;
width: 99vw;
height: 470px;
align: middle;
}
#slider.fadeOut {
opacity: 0;
}
HTML
<img id="slider" src="Images/image1">
JavaScript
var imgArray = [
'Images/image1.jpg',
'Images/image2.jpg',
'Images/image3.jpg',
'Images/image4.jpg',
'Images/image5.jpg',
'Images/image6.jpg',
'Images/image7.jpg',
'Images/image8.jpg'
],
curIndex = 0;
imgDuration = 5000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function() {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
},1000);
curIndex++;
if (curIndex == imgArray.length) {
curIndex = 0;
}
setTimeout(slideShow, imgDuration);
}
slideShow();
问题是过渡是跳跃的,所以图像会在 1 秒内淡出,然后同一图像仍在显示,然后下一个图像将在没有过渡的情况下加载。
我确定这是一个我忽略的简单修复。
发生这种情况是因为当您在图像上更改 src
时,它仍然必须加载图像文件,并且您不会等待它发生才能继续其余过程。
您的方法应该加载图像并在完成时使用回调函数,然后执行剩余的过程。
更新:
所以我知道您的示例使用 CSS 转换,而这个使用 jQuery 但我希望您看到链接回调函数的好处。如果你仔细看这个,你可以看到 img 请求是如何在淡出完成之前发出的,然后脚本加载 img,只有当加载完成时,它才会将新图像放入容器中并淡出然后一旦淡入,下一个回调将再次调用 setTimeout 以使其继续运行。这样您的所有操作都会按顺序发生。
var imgArray = [
'http://www.fillmurray.com/200/300',
'http://www.fillmurray.com/300/200',
'http://www.fillmurray.com/500/200',
'http://www.fillmurray.com/300/600',
'http://www.fillmurray.com/350/200',
'http://www.fillmurray.com/300/350',
],
curIndex = 0;
imgDuration = 5000;
function slideShow() {
$("#slider").fadeOut('slow',function() {
var img = $("<img />").attr('src', imgArray[curIndex])
.on('load', function() {
$("#slider").html(img).fadeIn('normal',function(){
curIndex++;
if (curIndex == imgArray.length) {
curIndex = 0;
}
setTimeout(slideShow, imgDuration);
});
});
});
}
slideShow();
#slider {
border-radius: 10px;
box-shadow: -5px 7px 5px #888888;
}
#slider img {
width: 99vw;
height: 470px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider"></div>