Изменение порядка массива jquery начинается с заданной позиции - PullRequest
Новая
       10

Изменение порядка массива jquery начинается с заданной позиции

0 голосов
/ 03 мая 2018

Я создал слайд-шоу только с 1 элементом img и несколькими фотографиями, поэтому он меняется каждые 6 секунд, получая путь к фотографиям из файла json Поэтому он отправляет пути json в файл php, а затем получает пути jquery> 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"
    }
]



Надеюсь, вы понимаете, потому что мой английский такой плохой:)

...