将可拖动的幻灯片捕捉到下一个或上一个幻灯片位置

时间：2018-07-24 21:32:17

标签： jquery

我有这个jsfiddle。我希望滑块是可拖动的，但是当您甚至将一个项目稍微移动到每一侧时，它应该完成整个步骤并锁定到其珍贵/下一张幻灯片的位置。像here。

我尝试使用.draggable（），但并没有真正到达目的地。

这是到目前为止的代码：

    <div class="ido">
  <div class="slider">
    <div class="sliderin">
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text text text</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text2 text2 text2</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="item">
        <div class="image">
          <img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/0021-1.jpg">
          <div class="button">
            <span>i</span>
          </div>
          <div class="modal">
            <div class="modal-dialog">
              <div class="modal-content ui-draggable ui-draggable-handle">
                <p>text3 text3 text3</p>
                <div class="button-close">
                  x
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="idopagination">
    <span class="nexter"><img src="https://thegreenbox.co.il/wp-content/uploads/2018/06/leftarrow.png"></span>
    <span class="prever"><img src="https://thegreenbox.co.il/wp-content/uploads/2018/07/rightarrow.png"></span>
  </div>
</div>


.ido {
  max-width: 900px;
  margin: 50px auto;
  padding: 50px;
  position: relative;
}

.idopagination {
  position: absolute;
  top: 0;
  left: 60px;
}

.idopagination span:hover {
  cursor: pointer;
}

.nexter {
  margin-right: 15px;
}

.prever {
  pointer-events: none;
}

.prever img {
  filter: grayscale(100%);
}

.item {
  display: inline-block;
  float: right;
  text-align: center;
}

.item .image {
  width: 90%;
  float: none;
  border: 1px solid black;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
}

.image img {
  width: 96%;
  margin: 5px auto;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.button {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 50px;
  text-align: center;
  background: gray;
  color: white;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  border-radius: 0 10px 10px 0;
}

.button:hover,
.button-close:hover {
  cursor: pointer;
}

.modal-content {
  height: 350px !important;
  padding: 50px;
  border: 10px solid gray;
  border-radius: 20px;
  background: white;
  z-index: 9999;
  display: none;
  margin: 0 auto;
  position: relative;
}

.button-close {
  position: absolute;
  right: 0;
  top: 20px;
  width: 50px;
  text-align: center;
  background: gray;
  color: white;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  border-radius: 10px 0 0 10px;
}

.modal-dialog {
  position: relative;
  width: 700px;
  margin: 50px auto;
}

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 1px;
}

.sliderin {
  position: absolute;
}

  // MODAL //

  $(function() {
    $(".modal-content").draggable();
  });

  $(".button").click(function() {
    $(this)
      .parent()
      .find(".modal")
      .fadeToggle("200");
    $(this)
      .parent()
      .find(".modal-content")
      .fadeToggle("200");
  });

  $(".button-close").click(function() {
    $(this)
      .closest(".modal")
      .fadeToggle("200");
    $(this)
      .closest(".modal-content")
      .fadeToggle("200");
  });

  $(document).keydown(function(e) {
    if (e.keyCode == 27) {
      $(".modal").fadeOut("200");
      $(".modal-content").fadeOut("200");
    }
  });

  // SLIDER //

  var sliderwidth = $(".slider").width();

  if (sliderwidth > 869) {
    var itemwidth = parseInt(sliderwidth, 10) / 3;
    $(".slider .sliderin .item").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10) * 3;
    var firstpos = parseInt(itemwidth, 10) * 6;
    var endpos = parseInt(firstpos, 10) - 1;
  } else if (sliderwidth < 870 && sliderwidth > 579) {
    var itemwidth = parseInt(sliderwidth, 10) / 2;
    $(".slider .sliderin .item").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10) * 4.5;
    var firstpos = parseInt(itemwidth, 10) * 7;
    var endpos = parseInt(firstpos - itemwidth - 1);
  } else {
    $(".slider .sliderin .item").css("width", sliderwidth);
    var itemwidth = sliderwidth;
    var sliderinwidth = parseInt(sliderwidth, 10) * 9;
    var firstpos = parseInt(itemwidth, 10) * 8;
    var endpos = parseInt(firstpos, 10) - 1;
  }

  var leftedge = parseInt(-1);

  $(".slider .sliderin").css({
    width: sliderinwidth,
    left: -firstpos
  });

  var sliderheight = $(".slider .sliderin .item").height();
  $(".slider").css("height", sliderheight);

  function modifyWidth() {
    var sliderwidth = $(".slider").width();

    if (sliderwidth > 869) {
      var itemwidth = parseInt(sliderwidth, 10) / 3;
      $(".slider .sliderin .item").css("width", itemwidth);
      var sliderinwidth = parseInt(sliderwidth, 10) * 3;
      var firstpos = parseInt(itemwidth, 10) * 6;
      var endpos = parseInt(firstpos, 10) - 1;
    } else if (sliderwidth < 870 && sliderwidth > 579) {
      var itemwidth = parseInt(sliderwidth, 10) / 2;
      $(".slider .sliderin .item").css("width", itemwidth);
      var sliderinwidth = parseInt(sliderwidth, 10) * 4.5;
      var firstpos = parseInt(itemwidth, 10) * 7;
      var endpos = parseInt(firstpos - itemwidth - 1);
    } else {
      $(".slider .sliderin .item").css("width", sliderwidth);
      var itemwidth = sliderwidth;
      var sliderinwidth = parseInt(sliderwidth, 10) * 9;
      var firstpos = parseInt(itemwidth, 10) * 8;
      var endpos = parseInt(firstpos, 10) - 1;
    }

    var leftedge = parseInt(-1);

    $(".slider .sliderin").css({
      width: sliderinwidth,
      left: -firstpos
    });

    var sliderheight = $(".slider .sliderin .item").height();
    $(".slider").css("height", sliderheight);
  }

  $(".idopagination .nexter").click(function() {
    $(this)
      .parent()
      .parent()
      .find(".sliderin")
      .animate({
        left: "+=" + itemwidth
      }, "slow", function() {
        var posn = $(this).position();
        if (posn.left > leftedge) {
          $(this)
            .parent()
            .parent()
            .find(".nexter")
            .css("pointer-events", "none");
          $(this)
            .parent()
            .parent()
            .find(".nexter img")
            .css("filter", "grayscale(100%)");
        } else {
          $(this)
            .parent()
            .parent()
            .find(".nexter")
            .css("pointer-events", "initial");
          $(this)
            .parent()
            .parent()
            .find(".nexter img")
            .css("filter", "none");
        }
        if (posn.left < -endpos) {
          $(this)
            .parent()
            .parent()
            .find(".prever")
            .css("pointer-events", "none");
          $(this)
            .parent()
            .parent()
            .find(".prever img")
            .css("filter", "grayscale(100%)");
        } else {
          $(this)
            .parent()
            .parent()
            .find(".prever")
            .css("pointer-events", "initial");
          $(this)
            .parent()
            .parent()
            .find(".prever img")
            .css("filter", "none");
        }
      });
  });

  $(".idopagination .prever").click(function() {
    $(this)
      .parent()
      .parent()
      .find(".sliderin")
      .animate({
        left: "-=" + itemwidth
      }, "slow", function() {
        var posp = $(this).position();
        if (posp.left > leftedge) {
          $(this)
            .parent()
            .parent()
            .find(".nexter")
            .css("pointer-events", "none");
          $(this)
            .parent()
            .parent()
            .find(".nexter img")
            .css("filter", "grayscale(100%)");
        } else {
          $(this)
            .parent()
            .parent()
            .find(".nexter")
            .css("pointer-events", "initial");
          $(this)
            .parent()
            .parent()
            .find(".nexter img")
            .css("filter", "none");
        }
        if (posp.left < -endpos) {
          $(this)
            .parent()
            .parent()
            .find(".prever")
            .css("pointer-events", "none");
          $(this)
            .parent()
            .parent()
            .find(".prever img")
            .css("filter", "grayscale(100%)");
        } else {
          $(this)
            .parent()
            .parent()
            .find(".prever")
            .css("pointer-events", "initial");
          $(this)
            .parent()
            .parent()
            .find(".prever img")
            .css("filter", "none");
        }
      });
  });

  // END //

  $(window).resize(function() {
    modifyWidth();
  });

2 个答案:

答案 0 :(得分：0)

我正在慢慢到达那里：

    var start,stop;

    $(".sliderin").draggable({
        axis: "x",
        start: function(event, ui) {
            start = ui.position.left;
        },
        stop: function(event, ui) {
            stop = ui.position.left;
            if (start < stop) {
            $(".sliderin").animate({
            left: "+=" + itemwidth
          }, "slow")
            }
            else {
            $(".sliderin").animate({
            left: "-=" + itemwidth
          }, "slow")
            }
    }
});

只需要弄清楚如何完成对itemwidth的移动，而不是使其变为itemwidth，因为移动是在停止已经产生一定距离的drap之后计算出来的。

答案 1 :(得分：0)

明白了：）

  1. 我必须在方程中的每个变量之前输入parseInt。
  2. 在向右移动或向左移动时，我必须以不同的方式计算从起点到终点的距离：右边是（停止－开始），左边是（开始－停止）。
  3. 一旦计算出该距离，就可以将itemwidth-distance设置为动画，作为剩余的动画。

这里是：http://jsfiddle.net/idoangel/z6t1odn2/1/

这是添加到原始代码的代码：

 var start, stop;

  $(".sliderin").draggable({
    axis: "x",
    start: function(event, ui) {
      start = ui.position.left;
    },
    stop: function(event, ui) {
      stop = ui.position.left;
      var distancer = parseInt(stop, 10) - parseInt(start, 10);
      var distancel = parseInt(start, 10) - parseInt(stop, 10);
      var whatsleftr = parseInt(itemwidth, 10) - parseInt(distancer, 10);
      var whatsleftl = parseInt(itemwidth, 10) - parseInt(distancel, 10);
      if (start < stop) {
        $(".sliderin").animate({
          left: "+=" + whatsleftr
        }, "slow")
      } else {
        $(".sliderin").animate({
          left: "-=" + whatsleftl
        }, "slow")
      }
    }
  });
相关问题
最新问题