如何更改每个随机图像以平滑淡入下一个图像？
我尝试了一些不同的东西但没有运气。我想让当前图像慢慢淡出并淡入下一张图像。
HTML
<div class="TestRotator " , style="text-align: center; padding-top: 20px; padding-bottom: 50px;">
<img
src="/Users/loh/Documents/app1/images/0.png"
,
height="130"
id="rotator"
,
class="img-fluid, rounded image-hover"
alt="Responsive image"
/>
</div>
<script src="js_src/imagechanger.js"></script>
JS
(function () {
var rotator = document.getElementById("rotator"); // change to match image ID
var imageDir =
"/Users/loh/Documents/app1/images/";
var delayInSeconds = 3;
var num = 0;
let currentIndex = 0;
const totalImages = 16;
const changeImage = function () {
var incre = Math.floor(Math.random() * (totalImages-1) ) + 1;
num += incre;
num = num % totalImages;
rotator.src = imageDir + num + ".png";
};
setInterval(changeImage, delayInSeconds * 1000);
})();
隔江千里2回答
-
白猪掌柜的
我使用的技巧是使用背景图像而不是真实图像。这允许使用一些简单的 CSS 来为所有内容设置动画。对于仅 JS 的解决方案，我建议使用 jQuery。<html><head> <style> #view { background-image: url("/pictures/0.png"); transition: background-image 1s; background-repeat: no-repeat; width: 100%; height: 100%; } </style></head><body> <div id="view"></div> <script> const view = document.getElementById("view"); const imageDir = "/pictures/"; const delayInSeconds = 2; //more then #view transition timing const totalImages = 4; //0.png; 1.png; ...; 4.png; var i = 0; const changeImage = () => { i += Math.floor(Math.random() * (totalImages-1) ) + 1;; i %= totalImages; view.style["background-image"] = `url(${imageDir}${i}.png)`; }; changeImage(); //call immediately without having to wait for delayInSeconds setInterval(changeImage, delayInSeconds * 1000); </script></body> -
天涯尽头无女友
如果你想做动画，那么我建议你去图书馆寻找帮助。在这里，我使用的是 jQuery，基本上我需要的只是delay()和fadeOut()，尽管在大多数其他流行的库中应该可以找到等价物。另外：我正在设置z-index图像的 ，以便显示的第一张图像具有最高的 z-index，第二张图像是第二高的，依此类推。工作代码示例...$('#image1').delay(1000).fadeOut(500);$('#image2').delay(2000).fadeOut(500);$('#image3').delay(3000).fadeOut(500);$('#image4').delay(4000).fadeOut(500);$('#image5').delay(5000).fadeOut(500);$('#image6').delay(6000).fadeOut(500);div { position:fixed; background-color:white; font-size:500%;}#image1 { z-index:10;}#image2 { z-index:9;}#image3 { z-index:8;}#image4 { z-index:7;}#image5 { z-index:6;}#image6 { z-index:5;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="image1">😀</div><div id="image2">🤖</div><div id="image3">🎃</div><div id="image4">😺</div><div id="image5">🐶</div><div id="image6">🐵</div>
随时随地看视频慕课网APP
相关分类
JavaScript