Question

我创建了一个只有1个img元素和几张照片的幻灯片，所以它通过从json文件获取照片路径每6秒更改一次所以它将json路径发送到php文件，然后获取路径jquery＆gt; ajax之后每6秒用新路径改变src attr

所以我想在幻灯片中添加下一个和上一个按钮，我不知道我只有一个想法：重新排序数组的元素从上一张幻灯片或下一张幻灯片开始，如果我点击上一张它给我以前的幻灯片自动并使用新的重新排序的数组再次启动幻灯片我怎么能用jquery

来做这个想法

实施例： https://slideshowexamp.000webhostapp.com/

代码： html文件

<img class="slide"> 
<div>
    <button class="previous">
        <svg>
            <use xlink:href="imgs/icons.svg#chevron-left"></use>
        </svg>
    </button>
    <button class="next">
        <svg>
            <use xlink:href="imgs/icons.svg#chevron-right"></use>
        </svg>
    </button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function () {
        function getSlide(slide = "1") {
            var slides = [];
            $.ajax({
                type: 'POST',
                url: 'imgs.php',
                dataType: 'json',
                data: {
                    slide: '1'
                },
                success: function(data) {
                    $.each(data, function(index, element) {
                        slides.push(element.path);
                    });

                    slides = slides.toString();
                    slides = slides.split(",");

                    $.each(slides, function(i) {
                        var currentSlide = slides.indexOf(slides[i]);
                        var time = 6000 * currentSlide;
                        setTimeout(function() {
                            $('.slide').attr({
                                'src': slides[i],
                                'slide': currentSlide
                            });
                        }, time);
                    }); 

                    $('.slide').attr('total', (slides.length * 6000));
                }
            });
        }

        getSlide();

        setTimeout(function() {
            var totalTime = $('.slide').attr('total');
            setInterval(function() {
                getSlide();
            }, totalTime);
        }, 1000);
    });

php文件

<?php
    if(isset($_POST['slide'])) {
        $data = file_get_contents("imgs.json");
        exit($data);
    }
?>

json文件

[
    {   
        "path":"imgs/Slide1.jpg"
    },
    {   
        "path":"imgs/Slide2.jpg"
    },
    {   
        "path":"imgs/Slide3.jpg"
    }
]

希望你理解，因为我的英语非常糟糕：）

重新排序jquery数组从给定位置开始

0 个答案: