Вопросы Теги

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

Я нашел способ.

Перейдите в Internet Explorer, осмотрите и скопируйте всю часть тела.

Теперь перейдите по следующему URL:

ИЛИ сохраните код тела в файле HTML и откройте файл с помощью chrome

1
задан WebDevGuy 5 March 2019 в 07:21
поделиться

1 ответ

<!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 возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -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;
}

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

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

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

<Ч>
0
ответ дан 范锦钢 5 March 2019 в 07:21
поделиться
Другие вопросы по тегам:

Похожие вопросы: