首頁猿問如何更改每個隨機圖像以平滑淡入下一...

如何更改每個隨機圖像以平滑淡入下一個圖像？

JavaScript

隔江千里 2023-04-20 10:46:33

我嘗試了一些不同的東西但沒有運氣。我想讓當前圖像慢慢淡出并淡入下一張圖像。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>

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>

反對回復 2023-04-20

天涯盡頭無女友

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;

}

反對回復 2023-04-20

2 回答
0 關注
118 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何更改每個隨機圖像以平滑淡入下一個圖像？

如何更改每個隨機圖像以平滑淡入下一個圖像？

2 回答

添加回答

如何更改每個隨機圖像以平滑淡入下一個圖像？