时间戳

首页 > 解决方案 > 随机图像幻灯片，图像过渡淡入/淡出？

css - 随机图像幻灯片，图像过渡淡入/淡出？

问题描述

我正在将此脚本用于随机图像幻灯片，试图显示赞助商图像。该脚本工作正常，我正在尝试为其创建淡入和/或淡出效果。

剧本：

<script>
var delay=4000
var curindex=0

var randomimages=new Array()

    randomimages[0]="https://cdn4.sportngin.com/attachments/photo/5aed-137970385/cambria_large.jpg"
    randomimages[1]="https://cdn1.sportngin.com/attachments/photo/acab-137970605/9Round_large.png"
    randomimages[2]="https://cdn2.sportngin.com/attachments/photo/a12b-137971067/qdoba_large.jpg"
    randomimages[3]="https://cdn1.sportngin.com/attachments/photo/fcf5-137974579/chipotle_large.jpg"
    randomimages[4]="https://cdn3.sportngin.com/attachments/photo/3397-137974001/countryinn_large.jpg"


var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

document.write('<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]

}

setInterval("rotateimage()",delay)
</script>

脚本本身工作正常。

这是我为图像转换尝试过的 CSS：

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 4s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

当页面加载淡入时，第一个图像上工作，但后续的JSFiddle都没有。我希望有人能引导我朝着正确的方向前进。

标签： css

解决方案

这里有一个解决方案，在里面添加注释：

var delay=4000
var curindex=0

var randomimages=new Array()

    randomimages[0]="https://cdn4.sportngin.com/attachments/photo/5aed-137970385/cambria_large.jpg"
    randomimages[1]="https://cdn1.sportngin.com/attachments/photo/acab-137970605/9Round_large.png"
    randomimages[2]="https://cdn2.sportngin.com/attachments/photo/a12b-137971067/qdoba_large.jpg"
    randomimages[3]="https://cdn1.sportngin.com/attachments/photo/fcf5-137974579/chipotle_large.jpg"
    randomimages[4]="https://cdn3.sportngin.com/attachments/photo/3397-137974001/countryinn_large.jpg"


var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

//document.write('<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
// place the image on container:
document.querySelector('figure').innerHTML = '<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">';

function rotateimage()
{
document.querySelector('figure').innerHTML = ''; // clear image from container

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

//    document.images.defaultimage.src=randomimages[curindex]
// place image with different source on the container
document.querySelector('figure').innerHTML = '<img class="fade-in" name="defaultimage" height="294" width="294" style="display:block; margin-left:auto; margin-right:auto;" src="'+randomimages[curindex]+'">';

}

setInterval("rotateimage()",delay)
.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 4s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
<figure></figure>

其他重要说明：

  1. 这里的关键是创建元素，以便类可以工作。现在您只是更改src属性，因此类不会更改（您可以在浏览器开发工具上检查它）。

  2. On your code you use document.write. I change it to .innerHTML - both consider to be BAD practices on production. You should create and append nodes instead. I use it here cause it fast.

推荐阅读