Question

我有一个脚本，使用HTML可以创建一个小滑块。

此滑块的特别之处在于，他使用一个名为Lottie的库。该库制作动画背景。

几乎每个幻灯片都具有“后退”和“后退”字样，如后退按钮。这些按钮可以将幻灯片更改为下一张或上一张幻灯片。

“下一步”按钮可以正常工作，但是当我使用“ acc”按钮时，它却无法正常工作。我希望该按钮可以轻松地将幻灯片更改为上一张。

我的JS脚本太复杂了，如果可能的话，我也在寻找一些简化方法。

要下载的JSON：

var lottieone = document.getElementById('lottieone');
    var lottietwo = document.getElementById('lottietwo');
    var lottiethree = document.getElementById('lottiethree');
    var lottiefour = document.getElementById('lottiefour');

    $('#lottieone').show();
    $('#lottietwo').hide();
    $('#lottiethree').hide();
    $('#lottiefour').hide();

    lottie.loadAnimation({
        container: lottieone,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        path: 'anim/data-1.json'
    });

    function missionsSlide() {
        lottie.destroy();
        $('#lottieone').hide();
        $('#lottietwo').show();
        $('#lottiethree').hide();
        $('#lottiefour').hide();

        lottie.loadAnimation({
            container: lottietwo,
            renderer: 'svg',
            loop: false,
            autoplay: true,
            path: 'anim/data-2.json'
        });
    }

    function researchSlide() {
        lottie.destroy();
        $('#lottieone').hide();
        $('#lottietwo').hide();
        $('#lottiethree').show();
        $('#lottiefour').hide();

        lottie.loadAnimation({
            container: lottiethree,
            renderer: 'svg',
            loop: false,
            autoplay: true,
            path: 'anim/data-3.json'
        });
    }

    function educationSlide() {
        lottie.destroy();
        $('#lottieone').hide();
        $('#lottietwo').hide();
        $('#lottiethree').hide();
        $('#lottiefour').show();

        lottie.loadAnimation({
            container: lottiefour,
            renderer: 'svg',
            loop: false,
            autoplay: true,
            path: 'anim/data-4.json'
        });
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js"></script>

<section class="slider">
    <div id="lottieone" class="lottieSlide">
        <div class="content">
            <button onclick="missionsSlide()">Premedix Academy</button>
        </div>
    </div>
    <div id="lottietwo" class="lottieSlide mainSliders">
        <div class="content">
            <h1>MISSIONS</h1>
            <button onclick="researchSlide()">Next</button>
        </div>
    </div>
    <div id="lottiethree" class="lottieSlide mainSliders">
        <div class="content">
            <h1>RESEARCH</h1>
            <button onclick="missionsSlide()">Bacc</button>
            <button onclick="educationSlide()">Next</button>
        </div>
    </div>
    <div id="lottiefour" class="lottieSlide mainSliders">
        <div class="content">
            <h1>EDUCATION</h1>
            <button onclick="researchSlide()">Bacc</button>
        </div>
    </div>
</section>

Javascript：滑块无法滑到上一张幻灯片

0 个答案: