可拖动的图像滑块答案

【问题标题】：Draggable image slider可拖动的图像滑块
【发布时间】：2020-06-10 10:39:14
【问题描述】：

我对编程世界比较陌生，这是我关于堆栈溢出的第一个问题。我必须创建一个用 php 和 jquery 编写的系统，该系统允许订购一系列图像，并根据顺序创建横幅式动画。唯一的问题是，当脚本从 div 中选择图像来创建动画时，它们会消失。提前感谢您的合作

javascript

$(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>

【问题讨论】：

首先选择images[0] 并将其放入预览中。然后你淡出它，在里面设置一个新图像并再次淡入。在这个过程中哪里的代码没有按预期运行？
使用 `` const images = document.querySelectorAll ('.imgw'); 选择图像``当我在动画（div 预览）中显示它们时，它们会从 div 幻灯片中消失，我希望图像保留在该 div 中

标签： php jquery animation web-deployment banner

【解决方案1】：

我更好地阅读了文档并解决了问题

javascript

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);

【讨论】：