首頁猿問我想隨機化并向圖像列表添加平滑過渡

我想隨機化并向圖像列表添加平滑過渡

JavaScript

叮當貓咪 2023-05-11 13:56:46

我目前正在循環播放圖像列表。以下是我到目前為止所擁有的。我無法正確隨機化列表。另外，我怎樣才能過渡到下一張圖片。我想讓我的圖像平滑地淡入下一張圖像，而不是快速將圖像切換到下一張。HTML<div class="TestRotator"> <img height="170" id="rotator" class="img-fluid, image-hover" alt="Responsive image"/></div><script src="js_src/art-imagechanger.js"></script>JS(function () { var rotator = document.getElementById("rotator"); var imageDir = ['https://vignette.wikia.nocookie.net/birds/images/0/09/Birds-01.jpg','https://nas-national-prod.s3.amazonaws.com/styles/hero_mobile/s3/h_a1_7443_5_painted-bunting_julie_torkomian_adult-male.jpg','https://www.allaboutbirds.org/news/wp-content/uploads/2020/07/STanager-Shapiro-ML.jpg',]; var i = 0; function loop() { if(i > (imageDir.length - 1)){ i = 0; } var r = rotator.src = imageDir[i]; Math.floor(Math.random() * r) i++; loopTimer = setTimeout(loop ,3000); } loop(); })();

查看完整描述

1 回答

繁花不似錦

TA貢獻1851條經驗獲得超4個贊

至于淡入，這需要對您的 html 進行一些調整。您需要有 2 張圖像 - 舊圖像和新圖像。

<img?height="170"?id="rotator-old"?class="img-fluid,?image-hover"?/>
<img?height="170"?id="rotator-new"?class="img-fluid,?image-hover"?/>

然后在你的 js 中，你需要改變每個類，并應用 see 來淡化不透明度。在你的 js 中：

var rotatorOld = document.getElementById("rotator-old");?

var rotatorNew = document.getElementById("rotator-new");?

var imageDir = [<image urls>];

var shuffledImages = shuffle(imageDir)

var i = 0;

function loop() {

? // remove visibility from image being transitioned to

? rotatorNew.classList.remove('visible')

? if(i > (imageDir.length - 1)){

? ? i = 0;

? }

? if (i > 0) { // starting from rest with the first image

? ? // set image in the background to previous image

? ? rotatorOld.src = shuffledImages[i-1]

? }

? // set image in the foreground to new image

? rotatorNew.src = shuffledImages[i]

? // add visibility class with css transition

? rotatorNew.classList.add('visible')

? i++;

? loopTimer = setTimeout(loop ,3000);

}

loop();

在您的 CSS 中，在 2.5 秒延遲后以 0.5 秒過渡過渡不透明度：

#rotator-new {

? opacity: 0;

}

#rotator-new.visible {

? opacity: 1;

? transition: opacity 500ms 2500ms // or whatever

}

您還需要使用一些 CSS 來確保新舊圖像正確重疊。position: relative;這可以通過將父級設置為 have a并將每個子級img設置為 have來完成position: absolute; top: 0, bottom: 0; left: 0, right: 0;。

我沒有機會測試這段代碼，所以它可能需要一些調整才能正常運行。但是如果你用一些示例圖像制作一個 codesandbox 或 codepen，我相信我們可以讓它工作。如果不需要自己編寫代碼，我還建議尋找第 3 方庫來為您處理此問題。這稱為輪播，Boostrap是您可以使用的一個很好的輪播。

反對回復 2023-05-11

1 回答
0 關注
118 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

我想隨機化并向圖像列表添加平滑過渡

我想隨機化并向圖像列表添加平滑過渡

1 回答

添加回答