我尝试了一些不同的东西但没有运气。我想让当前图像慢慢淡出并淡入下一张图像。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 回答
白猪掌柜的
TA贡献1893条经验 获得超10个赞
我使用的技巧是使用背景图像而不是真实图像。这允许使用一些简单的 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>
天涯尽头无女友
TA贡献1831条经验 获得超9个赞
如果你想做动画，那么我建议你去图书馆寻找帮助。在这里，我使用的是 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>
添加回答
举报
0/150
提交
取消