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

Question

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

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

＆＃13;

＆＃13;

$('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();
  },
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

JSFiddle DEMO

那么，可能有任何建议吗？

Answer 1

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

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

所以我为点击和滑动事件添加了另一个函数showSlide(index)。（他们的差异点击只需显示当前但刷卡需要显示上一个或下一个）

检查这些代码并希望它有所帮助！

＆＃13;

＆＃13;

$('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();
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;