如何在滑动列表上进行点导航

Question

我制作了一个带点导航的滑动列表。当用户单击一个点时，将显示特定图像并且该点变为活动 class 以指示当前显示的图像。

到目前为止一切正常。然后我添加了 TouchSwipe 插件，这也工作正常，除了 dot-menu 不起作用，我不确定如何解决它。

$('ul li').each(function (i) {
  $('ol').append('<li>');
  $('ol li:first-child').addClass('slide-item-active');
});

$('ol li').bind('click', function(){
  $('ol li').removeClass('slide-item-active');

  var index = $(this).index() + 1;

  $(this).addClass('slide-item-active')
  $(".active").hide();

  $("#slide-item_" + index).show();        
  $(".slide-item").removeClass("active");
  $("#slide-item_" + index).addClass("active");
}); 

function nextSlide(){
  var idx = $('.active').index();
  var ele = $('li').eq(idx).removeClass('active');
  var nxt = $(ele).next().addClass('active');
  if ($(nxt).length < 1) {
    var firstSlide = $('ul li')[0];
    $(firstSlide).addClass('active')
  }
}

function prevSlide() {
  var idx = $('.active').index();
  var ele = $('li').eq(idx).removeClass('active');
  var prev = $(ele).prev().addClass('active');
  if ($(prev).length < 1) {
    var firstSlide = $('ul li')[0];
    $(firstSlide).removeClass('active');
    $('ul li').last().addClass('active');
  }  
}

$("ul li").swipe({
  swipeLeft:function(event) {
    prevSlide()
  },
  swipeRight:function(event) {
    nextSlide();
  },
});

.slider-container ul {
  list-style: none;
}

.slide-item {
  top:0;
  width: 100%;
  display:none;  
}

.slide-item-imgwrap {
  height: 270px;
  width: 400px;
  overflow: hidden;
}

.active {
  display: block;
}

ol{
  list-style: none;
  width:100%;
}
ol li{
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  width:20px;
  height:20px;
  cursor: pointer;
} 
.slide-item-active {
  background: #036;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.15/jquery.touchSwipe.min.js"></script>

<div class="slider-container">
  <ul>
    <li id="slide-item_1" class="slide-item active" data-id="1">
      <div class="slide-item-imgwrap">
        <img src="http://www.grindtv.com/wp-content/uploads/2011/10/faroe-islands.jpg" width="100%"/>
      </div>
    </li>
    <li id="slide-item_2" class="slide-item" data-id="2">
      <div class="slide-item-imgwrap">
        <img src="http://cruisingoutpost.com/wp-content/uploads/2013/06/IAT-Europe-Faroe-Islands.jpg" width="100%"/>
      </div>
    </li> 
    <li id="slide-item_3" class="slide-item" data-id="3">
      <div class="slide-item-imgwrap">
        <img src="http://i.imgur.com/PIujv.jpg" width="100%"/>
      </div>
    </li>
    <li id="slide-item_4" class="slide-item" data-id="4">
      <div class="slide-item-imgwrap">
        <img src="http://www.icelandholidays.com/images/resorts/Locat-148-faroe.jpg" width="100%"/>
      </div>
    </li>  
  </ul>
  <ol></ol>
</div>

JSFiddle DEMO

那么，有什么建议吗？

Answer 1

问题是滑动没有改变点 class 所以他们不会改变。

我建议您将类似的功能合并到一个，以确保它们按预期工作。

所以我添加了另一个函数 showSlide(index) 用于点击和滑动事件。（他们的区别是点击只需要显示当前但滑动需要显示上一个或下一个）

检查这些代码，希望对您有所帮助！

$('ul li').each(function(i) {
  $('ol').append('<li>');
  $('ol li:first-child').addClass('slide-item-active');
});

$('ol li').bind('click', function() {
  var index = $(this).index() + 1;
  showSlide(index);
});

function nextSlide() {
  var currentIndex = $('.active').index() + 1;
  showSlide(currentIndex + 1);
}

function prevSlide() {
  var currentIndex = $('.active').index() + 1;
  showSlide(currentIndex - 1);
}

function showSlide(index) {
  var slideId = "slide-item_" + index;
  var $showSilde = $("#" + slideId);
  var $activeSlide = $(".active");
  $activeSlide.hide();
  $activeSlide.removeClass("active");

  $showSilde.addClass("active");
  $showSilde.show();

  $('.slide-item-active').removeClass('slide-item-active');
  $('ol li').eq(index - 1).addClass('slide-item-active');
}

$("ul li").swipe({
  swipeLeft: function(event) {
    prevSlide();
  },
  swipeRight: function(event) {
    nextSlide();
  }
});

.slider-container ul {
  list-style: none;
}
.slide-item {
  top: 0;
  width: 100%;
  display: none;
}
.slide-item-imgwrap {
  height: 270px;
  width: 400px;
  overflow: hidden;
}
.active {
  display: block;
}
ol {
  list-style: none;
  width: 100%;
}
ol li {
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.slide-item-active {
  background: #036;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.15/jquery.touchSwipe.min.js"></script>

<div class="slider-container">
  <ul>
    <li id="slide-item_1" class="slide-item active" data-id="1">
      <div class="slide-item-imgwrap">
        <img src="http://www.grindtv.com/wp-content/uploads/2011/10/faroe-islands.jpg" width="100%" />
      </div>
    </li>
    <li id="slide-item_2" class="slide-item" data-id="2">
      <div class="slide-item-imgwrap">
        <img src="http://cruisingoutpost.com/wp-content/uploads/2013/06/IAT-Europe-Faroe-Islands.jpg" width="100%" />
      </div>
    </li>
    <li id="slide-item_3" class="slide-item" data-id="3">
      <div class="slide-item-imgwrap">
        <img src="http://i.imgur.com/PIujv.jpg" width="100%" />
      </div>
    </li>
    <li id="slide-item_4" class="slide-item" data-id="4">
      <div class="slide-item-imgwrap">
        <img src="http://www.icelandholidays.com/images/resorts/Locat-148-faroe.jpg" width="100%" />
      </div>
    </li>
  </ul>
  <ol></ol>
</div>

如何在滑动列表上进行点导航

How to make dot-navigation on a swipe list

html

javascript

css

jquery

touchswipe