Некоторые проблемы с каруселью изображений (JavaScript) - PullRequest
Новая
       63

Некоторые проблемы с каруселью изображений (JavaScript)

0 голосов
/ 05 марта 2019

Я делаю имиджевую карусель, чтобы получить больше опыта.У меня есть галерея acf в фоновом режиме, где я добавляю свои изображения.

Вот код, который я использую здесь: 

<div class="images">

        <img id="carousel_images_top" src="" alt="">
        <div class="top_button next">Next</div>
        <div class="top_button prev">Prev</div>

    </div>

    <script>
        var imageList = [];
        <?php
            $images = get_field('image_carousel');

            foreach($images as $img) {
                echo "imageList.push('" . $img['url'] . "');";
            }

        ?>

        var imageTag = document.querySelector('#carousel_images_top');
        imageTag.src = imageList[0];
        function next() {
            console.log(imageTag.src)
            var curIndex = imageList.indexOf(imageTag.src);
            imageTag.src = imageList[(curIndex+1) % imageList.length];
        };
        function prev() {
            console.log(imageTag.src)
            var curIndex = imageList.indexOf(imageTag.src);
            imageTag.src = imageList[(curIndex-1 + imageList.length) % imageList.length];
        };
        document.querySelector('.next').addEventListener('click', next);
        document.querySelector('.prev').addEventListener('click', prev);
    </script>

Я вижу первое изображение в массиве,и я могу вернуться к одному, чтобы увидеть последний, но я не могу вернуться больше, чем один, а затем снова перейти к первому.Я не получаю никаких ошибок, и я попытался выяснить, где находится ошибка, но в массиве перечислены все мои 6 изображений, и кнопки работают.

Я предполагаю, что тамошибка в переменной curIndex, но я не могу понять, что именно.Кто-нибудь, кто может быстро взглянуть и указать мне правильное направление?

1 Ответ

0 голосов
/ 05 марта 2019 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
	  <div class="images">
		      <img id="carousel_images_top" src="" alt="">
	        <p>Current Index: <span id="currentindex"></span></p>
          <div class="top_button next">Next</div>
	        <div class="top_button prev">Prev</div>
	  </div>
	
	  <script>
	        var imageList = [
            'https://tse1-mm.cn.bing.net/th?id=OIP.2bdrFgmVuK6LO0ggJdNPZAHaFP&w=152&h=105&c=8&rs=1&qlt=90&dpr=1.5&pid=3.1&rm=2',
            'https://tse1-mm.cn.bing.net/th?id=OIP.yP3sLQkAOswh1wDZq21NtwHaFj&w=144&h=105&c=8&rs=1&qlt=90&dpr=1.5&pid=3.1&rm=2',
            'https://tse1-mm.cn.bing.net/th?id=OIP.FEUTSwbKW9ndBYzd-oI8OQHaIN&w=99&h=105&c=8&rs=1&qlt=90&dpr=1.5&pid=3.1&rm=2',
            ];
	
	        var imageTag = document.querySelector('#carousel_images_top');
          var currentindexTag = document.getElementById('currentindex');
	        imageTag.src = imageList[0];
	        function next() {
	            //console.log(imageTag.src)
	            var curIndex = imageList.indexOf(imageTag.src);
	            imageTag.src = imageList[(curIndex+1) % imageList.length];
              currentindexTag.innerHTML = curIndex;
	        };
	        function prev() {
	            //console.log(imageTag.src)
	            var curIndex = imageList.indexOf(imageTag.src);
	            imageTag.src = imageList[(curIndex-1 + imageList.length) % imageList.length];
              currentindexTag.innerHTML = curIndex;
	        };
	        document.querySelector('.next').addEventListener('click', next);
	        document.querySelector('.prev').addEventListener('click', prev);
	  </script>
  </body>
</html>

Следуйте коду, который вы пишете, замена изображений работает правильно, за исключением того, что ввод массива изображений имеет тот же URL.

Поскольку indexOf *Метод 1009 * возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если его нет. 

var images = ['1.png', '1.png', '1.png'];

//no matter how many times to execute images.indexOf('1.png'), it's always return 0.

Итак, лучшим решением будет замена curIndexс глобальным номером, как показано ниже: 

var curIndex = 0;

function prev() {
    ...
    curIndex -= 1
}

function next() {
    ...
    curIndex += 1;
}

Это решение должно избежать проблемы, с которой вы столкнулись.

Это пример, и он дает некоторые доказательства правильности вашего сценария.

Есть два направления, чтобы найти проблему.Один, чтобы проверить ввод изображений, а другой, попробуйте отладить код в реальной среде.

...