Как сделать листание картинок кликом на JS [закрыт]

133

17 марта 2019, 23:50

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

Я написал такой код:

    <!-- Листалка -->
<html>
 <head>
  <title>Листалка</title>
 </head>
 <body>
<!-- Основной блок. Располагается по центру. Курсор имеет вид <—> -->
     <div style='text-align: center; cursor: e-resize;'>
<!-- Изображение -->
       <img id="image" src="1.jpg" onClick="imgsrc();"/>
     </div>
<!-- Скрипт -->
    <script language="javascript">
<!-- Переменная i показывает, какое по счёту изображение отображается на экране -->
        var i=1;
<!-- Вывод изображения -->
        var image=document.getElementById("image");
       document.getElementById("i").innerHTML = i;
   <!-- Массив с изображениями -->
        var imgs=new Array('1.jpg', '2.jpg', '3.jpg', '1.jpg');

   <!-- Ширина экрана-->
        var w = screen.width;
   <!--Местоположение курсора по оси x-->
        var p = clientX;
   <!-- Функция листания изображений -->
    function imgsrc() {
<!-- Если курсор ближе к правому краю экрана, изображения листаются вперёд -->
          if(p > (w / 2)){
       if (i < 3) {
            i++;
            image.src=imgs[i];  
            }
          else {
            i = 1;
              image.src=imgs[i];
              }
          }
<!-- Если курсор ближе к левому краю экрана, изображения листаются назад -->
      else{
              if (i > 1) {
            i = i - 1;
            image.src=imgs[i];
            }
          else {
            i = 3;
              image.src=imgs[i];
              }
          }
      }
    </script>
 </body>
</html>

Однако этот код не работает, нормально: где бы я не шёлкнул по картинке, листание происходит назад.
В чём ошибка?

Answer 1

В вашем примере слишком много ошибок было.

В будущем открывайте консоль браузера, в хроме F12, очень удобная штука.

Посмотрите работающий пример кода.

var imgs = new Array('https://www.primefaces.org/primeng/assets/showcase/images/logo.png', 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', 'https://material.io/tools/icons/static/ic_material_192px_light.svg'); 
 
var image = document.getElementById("image"); 
 
image.src = imgs[0]; 
image.dataset.current = 0; 
 
function slide(ind) { 
  let current = +image.dataset.current; 
  current += ind; 
  if (current >= imgs.length) 
    current = 0; 
  if (current < 0) 
    current = imgs.length - 1; 
  image.src = imgs[current]; 
  image.dataset.current = current; 
} 
 
function imgsrc(event) { 
  var w = document.body.clientWidth; 
  var p = event.clientX; 
  if (p > (w / 2)) { 
    slide(1); 
  } else { 
    slide(-1); 
  } 
}

<div style='text-align: center; cursor: e-resize;'> 
 
  <img id="image" onclick="imgsrc(event);" /> 
 
</div>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Последовательная сортировка массива JS

Нужно отсортировать массив, чтобы [A-Z] были первыми, [a-z] вторыми, а все остальное внизу

javascript

Не отрисовывается переключение radio button

На форме в таблицу c помощью хелпера генерируется следующая разметка, массив переключателей с несколькими вариантами ответа (за - против...

115

javascript

Ajax запросы через setTimeout

145

javascript

Некорректная работа скрипта при .resize

Есть слайдерПо клику на слайд, один блок скрывается и появляется другой

151