Question

如何在这个HTML代码上随机化/随机播放图像？

＆＃13;

<div id="projects" class="clearfix">

<!-- ENSAIO PESSOAL -->
<figure class="mix portfolio-item pessoal">
    <img class="img-responsive" src="img/portfolio/EnsaioPessoal/1_preview.jpg" data-order="1" alt="Galeria">
    <a href="img/portfolio/EnsaioPessoal/1.jpg" title="Foto de ensaio pessoal" rel="portfolio" class="fancybox">
        <span class="plus"></span>
    </a>
    <figcaption class="mask">
        <h3>Ensaio pessoal</h3>
        <span>Algum comentário</span>
    </figcaption>
</figure>

<!-- ENSAIO PESSOAL -->
<figure class="mix portfolio-item pessoal">
    <img class="img-responsive" src="img/portfolio/EnsaioPessoal/1_preview.jpg" data-order="1" alt="Galeria">
    <a href="img/portfolio/EnsaioPessoal/1.jpg" title="Foto de ensaio pessoal" rel="portfolio" class="fancybox">
        <span class="plus"></span>
    </a>
    <figcaption class="mask">
        <h3>Ensaio pessoal</h3>
        <span>Algum comentário</span>
    </figcaption>
</figure>

<!-- ENSAIO PESSOAL -->
<figure class="mix portfolio-item pessoal">
    <img class="img-responsive" src="img/portfolio/EnsaioPessoal/2_preview.jpg" data-order="2" alt="Galeria">
    <a href="img/portfolio/EnsaioPessoal/2.jpg" title="Foto de ensaio pessoal" rel="portfolio" class="fancybox">
        <span class="plus"></span>
    </a>
    <figcaption class="mask">
        <h3>Ensaio pessoal</h3>
        <span>Algum comentário</span>
    </figcaption>
</figure>

<!-- ENSAIO PESSOAL -->
<figure class="mix portfolio-item pessoal">
    <img class="img-responsive" src="img/portfolio/EnsaioPessoal/3_preview.jpg" data-order="3" alt="Galeria">
    <a href="img/portfolio/EnsaioPessoal/3.jpg" title="Foto de ensaio pessoal" rel="portfolio" class="fancybox">
        <span class="plus"></span>
    </a>
    <figcaption class="mask">
        <h3>Ensaio pessoal</h3>
        <span>Algum comentário</span>
    </figcaption>
</figure>

</div>

＆＃13;

像这样：

（图像1）（图像2）（图像3）

刷新页面时：（图3）（图像2）（图像1）

再次：（图像2）（图像3）（图像1）

我该怎么办？我尝试了很多东西，什么也没做！我无法独自完成

Answer 1

您可以尝试使用随机排序创建新的图像数组，然后将#projects容器旧的html替换为所述新的图像数组。

//Get references to the container, images, and number of images
let $container = $("#projects")
let $images = $(".mix.portfolio-item.pessoal")
let numImages =$images.length

//Create a new array of images by randomly assigning indexes from 0--numImages
//and replacing the containers html with this new array
let newOrderOfImages = []
$images.each((index, img) => {
    let newIndex = Math.floor(Math.random() * numImages)

    //Keep creating random indexes until an empty one is found
    while(newOrderOfImages[newIndex] !== undefined) {
        newIndex = Math.floor(Math.random() * numImages)
    }

    newOrderOfImages[newIndex] = img
})

$container.html(newOrderOfImages)

随机化图类图像

1 个答案: