Использование функции jQuery «swipe» для перемещения по массиву изображений

Question

Я создаю простое слайд-шоу, которое управляется кнопками при просмотре на компьютере, и проводя жесты на устройствах с сенсорным экраном. This is a demo with 3 images.

Каждое изображение, соответствующее заголовок и навигация содержатся в пределах одного div. Вот первый один:

<div class="item" id="1"> 
    <img src="..."> 
    <div class="caption"> 
     caption 1 
    </div> 
    <div class="navigation"> 
     <a href="#" id="1prev">&lt</a> 1/3 <a href="#" id="1next">&gt</a> 
    </div> 
</div> 

Эти дивы показаны или скрыты с помощью «клик» и «swipeleft/swiperight» функции.

$(document).ready(function() { 
    $("#1prev").click(function() { 
     $("#1").hide(); 
     $("#3").show(); 
    }); 
    $("#1").on("swipeleft", function() { 
     $("#1").hide(); 
     $("#3").show(); 
    }); 
    $("#1next").click(function() { 
     $("#1").hide(); 
     $("#2").show(); 
    }); 
    $("#1").on("swiperight", function() { 
     $("#1").hide(); 
     $("#2").show(); 
    }); 
}); 

В слайд-шоу будет в общей сложности 40 изображений. Есть ли способ сконденсировать сценарий? Является ли это относительно эффективным и доступным решением? Правильно ли написан код? Можно ли улучшить?

Answer 1

Вы могли бы сделать что-то вроде этого:

Для элементов, я назначил классы к преду и следующим кнопкам вместо идентификаторов.

<div class="item" id="1"> 
    <img src="http://www.leecorbin.co/img1.jpg" width="50%" /> 
    <div class="caption">caption 1</div> 
    <div class="navigation"> 
     <a href="#" class="prevBtn">&lt</a> 
     1/3 
     <a href="#" class="nextBtn">&gt</a> 
    </div> 
</div> 

Затем в сценарии, на pagecreate

скрыть все элементы и показать только первый. Добавить обработчик для swipeleft и swiperight на предметы. Добавить обработчик кликов для кнопок навигации Внутри этих обработчиков определяется, в каком направлении мы идем, и в каком слайде мы в данный момент включаемся. Вызов функции, проходящей в направлении и текущем слайде; он определяет следующий слайд для отображения и делает переход.

$(document).on("pagecreate", "#page1", function() { 
    $(".item").hide().first(0).show(); 

    $(document).on("swipeleft swiperight", ".item", function (e) { 
     var dir = 'prev'; 
     if (e.type == 'swipeleft') { 
      dir = 'next'; 
     } 
     GoToNextSlide($(this), dir); 
    }); 

    $(document).on("click", ".navigation > a", function (e) { 
     var dir = 'prev'; 
     if ($(this).hasClass("nextBtn")) { 
      dir = 'next'; 
     } 
     var $item = $(this).closest(".item"); 
     GoToNextSlide($item, dir); 
    }); 

}); 

function GoToNextSlide($item, direction) { 
    var $next; 
    if (direction == 'next') { 
     if ($item.next().length > 0) { 
      $next = $item.next(); 
     } else { 
      $next = $(".item").first(); 
     } 
    } else { 
     if ($item.prev().length > 0) { 
      $next = $item.prev(); 
     } else { 
      $next = $(".item").last(); 
     } 
    } 
    $item.fadeOut(function() { 
     $next.fadeIn(); 
    }); 
} 

Обновлено DEMO

P.S. Если вы хотите использовать плагин, вы можете посмотреть что-то вроде http://owlgraphic.com/owlcarousel/