可移动的图像滑块

Question

我对编程的世界比较陌生，这是我在stack overflow上的第一个问题。我必须创建一个用php和jquery编写的系统，允许对一系列图片进行排序，并根据顺序创建一个横幅风格的动画。唯一的问题是，当脚本从div中选择图片来创建动画时，它们会消失.预先感谢您的合作

脚本

$(document).ready(function () {
    const images = document.querySelectorAll('.imgw');
    $('#preview').html(images[0]);
    $("#genera").click(function () {
        setInterval(banner, 2500);
        var index = 1;
    });
});

const banner = () => $('#preview').fadeOut('slow', function () {
    $(this).html(images[index]);
    $(this).fadeIn('slow', function () {
        if (index == images.length - 1) {
            index = 0;
        } else {
            index++;
        }
    });
})

html文件

<section>
    <div class="row" style="margin-top:25px;">
        <div class="col text-center">
            <h2 style="margin-top:25px;">Anteprima</h2>
            <div id="preview">
            </div>
        </div>
    </div>
</section>

<section>
    <div class="row" id="slides" style="margin-top:25px;">
        <div class="col text-center">
            <!-- <div id="box"> -->
            <h2 style="margin-top:25px;">Slides</h2>
            <ul id="sortable">

                <?php
                $html = "";
                $count = 1;
                foreach ($images as $img) {
                    $url = $img["url"];
                    $size = $img["size"];
                    $humanSize = $img["human_size"];
                    $html .= "\t\t<img src='{$url}' class='imgw' id='{$count}'  alt='image_{$count}' />\n";
                    $count++;
                }
                echo $html;
                ?>
            </ul>
        </div>

Answer 1

我看了文档比较好，解决了这个问题。

脚本

var images = $('.ui-sortable').children("img").clone();
    var index = 1;
    const banner = () => $('#anteprima').fadeOut('slow', function () {
        $(this).html(images[index]);
        $(this).fadeIn('slow', function () {
            if (index == images.length - 1) {
                index = 0;
            } else {
                index++;
            }
        });
    })
    setInterval(banner, 2500);