当div滑动到终点时如何使div返回起点

Question

我正在尝试使图像滚动使用控制按钮并自动滑动，现在我的问题是我需要知道当div击中左侧或右侧时如何将div返回到起点。到目前为止，您将知道div何时结束，但不知道在自动滑动的情况下如何将其返回到起点。

    var n = 3; //total number of slides to be display at once
var totalDeal = 9; //total deals to be display
var sliderTotalWidth = 100; //in percentage append % later
var z = (100 / totalDeal) + '%'; //ddslides width
var x = totalDeal / n;
var counter = 1;
$(".dialyDealSlider").css('width', x + '00%');
//$(".ddslides").css('width', ddslidesWidth);
fillDailyDeal(totalDeal, z);

function fillDailyDeal(totalDeal, z) {
  var imgUrl = '{$img}';
  var ext = '.jpg';
  var width = "width:" + z
  for (var i = 1; i <= totalDeal; i++) {
    var myDiv = $(
      "<div class='ddslides' style='" + width + "' >" +
      '<div class="dddesc">' +
      '<div class="ddtitle">' +
      '<a href="#">The is the title of the item it\'s a long title</a>' +
      '</div>' +
      "<div class='ddprice'>$"+i+"00</div>" +
      '<button class="ddview" title="View Item">view item</button>' +
      '</div>' +
      '<div class="ddimg">' +

      '</div>' +
      '<div class="vDivider"></div>' +
      '<div class="ddSaleBadge">sold 44%</div>' +
      '</div>');
    $("#dialyDealSlider").append(myDiv);
  }
}

$("#prev, #next").click(function() {

  if (this.id == "next") {
    counter++;
  } else {
    counter--;
  }
  //console.log(counter);
  if (counter == x) {
    alert('rigth end');
    //$("#dialyDealSlider").css('left', '0px'); 
  }

  if (counter == 1) {
    alert('left end');
  }

  var ddslidesWidth = $(".ddslides").width();

  var dir = this.id == "next" ? '-=' : '+=';
  var width = ddslidesWidth * n;

  //alert(leftpos);
  $("#dialyDealSlider").animate({
    left: dir + width
  }, 800);

});

我的代码在这里JSFIDDLE： https ://jsfiddle.net/sammyzeal/LqpL1n2g/

正如我们在上面的小提琴中看到的那样，当我们滑动div且价格在$700 $900 $700之间时，我们触底提示，这时会出现警报，在这一点上，如果用户不断单击该下一个按钮，我该如何滚动到开始价格在$ 100到$ 300之间，希望我的问题已解决，并在此先感谢您的帮助

Answer 1

我只是看到您按照我说的那样更新了代码，很好。 因此，我现在会毫不犹豫地提供帮助，您应该制作一个单独的slideNow()函数来滑动next或previous一个幻灯片，并且应该在检查当前或上一个幻灯片之后增加/减少counter ，如果这是最后一张幻灯片，请创建一个独立于goToStart()的函数goToStart()移动到第一张幻灯片，如果这是第一张幻灯片，只需从那里return就什么都不做，则可以使用以下脚本并以各种组合对其进行测试，例如，首先单击，然后再单击最后一张幻灯片幻灯片单击“下一步”，看是否转到第一个幻灯片，然后尝试从第一张幻灯片向左单击，并验证它是否向左移动或保持静止。

请参阅下面的演示

 var n = 3; //total number of slides to be display at once var totalDeal = 9; //total deals to be display var sliderTotalWidth = 100; //in percentage append % later var z = (100 / totalDeal) + '%'; //ddslides width var x = totalDeal / n; var counter = 1; $(".dialyDealSlider").css('width', x + '00%'); //$(".ddslides").css('width', ddslidesWidth); fillDailyDeal(totalDeal, z); function fillDailyDeal(totalDeal, z) { var imgUrl = '{$img}'; var ext = '.jpg'; var width = "width:" + z for (var i = 1; i <= totalDeal; i++) { var myDiv = $( "<div class='ddslides' style='" + width + "' >" + '<div class="dddesc">' + '<div class="ddtitle">' + '<a href="#">The is the title of the item it\\'sa long title</a>' + '</div>' + "<div class='ddprice'>$" + i + "00</div>" + '<button class="ddview" title="View Item">view item</button>' + '</div>' + '<div class="ddimg">' + '</div>' + '<div class="vDivider"></div>' + '<div class="ddSaleBadge">sold 44%</div>' + '</div>'); $("#dialyDealSlider").append(myDiv); } } $("#prev, #next").click(function() { var target = this.id; //console.log(counter); if (counter == x && target == "next") { counter = 1; goToStart(); return; } if (counter == 1 && target == "prev") { return; } if (target == "next") { counter++; } else { counter--; } //slide the slides slideNow(target, n); }); function goToStart() { $("#dialyDealSlider").animate({ left: 0 }, 800); } function slideNow(target, n) { var ddslidesWidth = $(".ddslides").width(); var dir = target == "next" ? '-=' : '+='; var width = ddslidesWidth * n; //alert(leftpos); $("#dialyDealSlider").animate({ left: dir + width }, 800); } 

 .dailyDeal { height: 150px; width: 100%; margin-top: 15px; padding: 0 !important; } .dialyDealBox { float: left; height: 150px; padding: 0 !important; overflow: hidden; } .dialyDealSlider { width: 100%; height: 150px; position: absolute; border: 1px solid #ddd; } .ddslides { height: 150px; width: 2%; float: left; background-color: #fff; position: relative; padding: 10px 0; } @media only screen and (max-width: 768px) { .ddslides { width: 16.66%; } } @media (max-width:320px) { .ddslides { width: 33.33%; } } .ddimg { float: left; margin: auto; height: 100%; width: 32%; margin-right: 4px; } .ddimg>a>img { height: 100%; width: 100%; } .dddesc { float: left; margin: auto; height: 100%; width: 65%; padding: 0 10px 0 15px; } .ddSaleBadge { position: absolute; top: 5px; right: 5px; width: 37px; height: 38px; padding: 5px 2px 4px 3px; overflow: hidden; background: url("/trobay/img/icon/label.png") no-repeat 50% 50%; line-height: 14px; text-align: center; color: #fff; } .ddtitle { margin-bottom: 10px; } .ddtitle>a { font-size: 14px; color: #666666; text-decoration: none; } .ddtitle>a:hover { color: #e4393c; text-decoration: none; } .ddprice { color: #e4393c; font-size: 16px; margin-bottom: 10px; } .ddview { color: #fff; background-color: #e4393c; font-size: 14px; border: 0; outline: 0; padding: 4px; font-weight: bold; } .ddslider-prev { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 5px; color: #666666; font-weight: bold; font-size: 18px; transition: 0.6s ease; left: 0; z-index: 10; background-color: rgba(221, 221, 221, 1); display: block; } .ddslider-next { cursor: pointer; position: absolute; right: 0; top: 50%; width: auto; margin-top: -22px; padding: 5px; color: #666666; font-weight: bold; font-size: 18px; transition: 0.6s ease; z-index: 10; background-color: rgba(221, 221, 221, 1); display: block; } .vDivider { height: 130px; border-right: 1px dotted #666; position: absolute; top: 10px; ; right: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="dailyDeal col-md-12"> <div class="dialyDealBox col-xs-10" id="dialyDealBox"> <div class="dialyDealSlider" id="dialyDealSlider"> </div> <div class="ddslider-prev" id="prev">&#10094;</div> <div class="ddslider-next" id="next">&#10095;</div> </div> </div> </div>