第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

嘗試對(duì)圖像進(jìn)行不透明度的過渡

嘗試對(duì)圖像進(jìn)行不透明度的過渡

肥皂起泡泡 2023-07-29 13:55:48
就像我的標(biāo)題所說，我試圖在圖像上進(jìn)行不透明度（0 到 1，間隔 2 秒）的過渡，但我不知道如何實(shí)現(xiàn)。過渡僅適用于第一張圖像，但不適用于其他圖像，我不明白為什么。所以我希望你能幫助我理解我的錯(cuò)誤，我是 javascript 的新手。預(yù)先感謝您，這是我的代碼我的 HTML 文件：<img src="img/1.jpg" alt="slide-photo">我的 CSS 文件：#slideshow-home img {    width: 100%;    opacity: 0;    transition: 1s ease-in-out;}我的JS文件：var image = document.querySelector('img');var img = 1 ;window.setInterval(changeImage, 2000); function changeImage() {    image.setAttribute('src', 'img/' + img + '.jpg');     image.style.opacity = 1;     img++;     if(img === 6) {         img = 1;     }}
查看完整描述

1 回答

?
喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

這就是我處理圖像淡入淡出的方式，好處是它直到圖像實(shí)際加載后才開始，所以淡入時(shí)它永遠(yuǎn)不會(huì)斷斷續(xù)續(xù)


JS


var image = document.querySelector('img');

var img = 1;


window.setInterval(changeImage,5000); 


function changeImage() {

    image.classList.remove('fadeIn')

    image.src = 'img/'+img+'.jpg'

    img++

    if (img == 6) {

      img = 1;

    } 

}


image.addEventListener('load', () => { // This function looks at the image and every time an image is loaded i.e whenever it gets a new src, it does a fade in animation

  void(image.offsetHeight)

  image.classList.add('fadeIn')

})

CSS


我通常用動(dòng)畫來做到這一點(diǎn)，如下所示


#slideshow-home img {

    width: 100%;

    opacity: 0;

}


@keyframes fadeIn {

  0% {

    opacity: 0;

  }


  100% {

    opacity: 1;

  }

}


.fadeIn {

  animation:fadeIn 2s forwards;

}


查看完整回答
反對(duì) 回復(fù) 2023-07-29
  • 1 回答
  • 0 關(guān)注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)