1

我已经用谷歌搜索了一段时间，但找不到答案。我的网站上有一个幻灯片类型的 div，您可以在其中使用滚动条浏览图像。

<div id="container" style="overflow-x: scroll; overflow-y: hidden; width: 700px; height: 300px;">
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/1.png')"></div>
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/2.png')"></div>
    <div class="content" style="float: left; width: 700px; height: 300px; background: url('images/3.png')"></div>
</div>

就这样你明白了.. 我想做的是让用户能够在图片本身上使用鼠标并滑动 div，而不是使用滚动条。我假设这将使用带有拖放功能的 jquery。老实说，我真的不知道从哪里开始，有什么想法吗？

4

4 回答 4

1

我想这就是你要找的:)

一个 jQuery 项目，让您可以用鼠标或手机滑动它

于 2013-09-13T17:09:59.537 回答
1

这个插件应该是你的完美之选。

照片台

http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/

照片台

快乐编码:)

于 2013-09-13T17:21:35.000 回答
1

您可以使用 JQuery 的“Dragger”功能，它允许用户拖动元素。问题是，它与 Touch 不兼容，但有一些技巧可以让它与触摸屏一起使用，例如“jQuery UI Touch Punch”。这很完美，除非您的整个屏幕都充满了受“Touch Punch”影响的元素，在这种情况下，您将无法在手机中上下滚动。

如果您没有用 Touch Punch 效果的元素填充整个页面，这是最适合您的解决方案。试试看。

http://touchpunch.furf.com/

一个示例拖动器函数，它获取 ul 中的所有元素，在 watchlist 类中，并允许使用鼠标向左或向右拖动，或在手机中触摸。

$(function() {
  var slides = $('#something').children().length;
  var slideWidth = $('#something').width();
  var min = 0;
  var max = -((slides - 1) * slideWidth);

  $("#something").width(slides * slideWidth).draggable({
    axis: 'x',
    drag: function(event, ui) {
      if (ui.position.left > min) ui.position.left = min;
      if (ui.position.left < max) ui.position.left = max;
    }
  });


});
于 2016-11-25T04:05:36.783 回答
0

这是纯 JavaScript（无框架）的解决方案：https ://www.cssscript.com/draggable-touch-slider-carousel/

我们可以在上面的网站或他们提供的其他链接上看到它：https ://codepen.io/cconceicao/pen/PBQawy

引用网站：

为滑块创建 html。

<div id="slider" class="slider">
  <div class="wrapper">
    <div id="items" class="items">
      <span class="slide">Slide 1</span>
      <span class="slide">Slide 2</span>
      <span class="slide">Slide 3</span>
      <span class="slide">Slide 4</span>
      <span class="slide">Slide 5</span>
      ...
    </div>
  </div>
  <a id="prev" class="control prev"></a>
  <a id="next" class="control next"></a>
</div>

滑块所需的 CSS 样式。

.slider {
  width: 300px;
  height: 200px;
}

.wrapper {
  overflow: hidden;
  position: relative;
  background: #222;
  z-index: 1;
}

#items {
  width: 10000px;
  position: relative;
  top: 0;
  left: -300px;
}

#items.shifting {
  transition: left .2s ease-out;
}

.slide {
  width: 300px;
  height: 200px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  position: relative;
  background: #FFCF47;
}

Style the navigation controls.

.control {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prev {
  background-image: url(ChevronLeft.png);
  left: -20px;
}

.next {
  background-image: url(ChevronRight-512.png);
  right: -20px;
}

.prev:active,
.next:active {
  transform: scale(0.8);
}

激活滑块所需的 JavaScript。

var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('items'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

slide(slider, sliderItems, prev, next);

function slide(wrapper, items, prev, next) {
  var posX1 = 0,
      posX2 = 0,
      posInitial,
      posFinal,
      threshold = 100,
      slides = items.getElementsByClassName('slide'),
      slidesLength = slides.length,
      slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
      firstSlide = slides[0],
      lastSlide = slides[slidesLength - 1],
      cloneFirst = firstSlide.cloneNode(true),
      cloneLast = lastSlide.cloneNode(true),
      index = 0,
      allowShift = true;
  
  // Clone first and last slide
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.classList.add('loaded');
  
  // Mouse and Touch events
  items.onmousedown = dragStart;
  
  // Touch events
  items.addEventListener('touchstart', dragStart);
  items.addEventListener('touchend', dragEnd);
  items.addEventListener('touchmove', dragAction);
  
  // Click events
  prev.addEventListener('click', function () { shiftSlide(-1) });
  next.addEventListener('click', function () { shiftSlide(1) });
  
  // Transition events
  items.addEventListener('transitionend', checkIndex);
  
  function dragStart (e) {
    e = e || window.event;
    e.preventDefault();
    posInitial = items.offsetLeft;
    
    if (e.type == 'touchstart') {
      posX1 = e.touches[0].clientX;
    } else {
      posX1 = e.clientX;
      document.onmouseup = dragEnd;
      document.onmousemove = dragAction;
    }
  }

  function dragAction (e) {
    e = e || window.event;
    
    if (e.type == 'touchmove') {
      posX2 = posX1 - e.touches[0].clientX;
      posX1 = e.touches[0].clientX;
    } else {
      posX2 = posX1 - e.clientX;
      posX1 = e.clientX;
    }
    items.style.left = (items.offsetLeft - posX2) + "px";
  }
  
  function dragEnd (e) {
    posFinal = items.offsetLeft;
    if (posFinal - posInitial < -threshold) {
      shiftSlide(1, 'drag');
    } else if (posFinal - posInitial > threshold) {
      shiftSlide(-1, 'drag');
    } else {
      items.style.left = (posInitial) + "px";
    }

    document.onmouseup = null;
    document.onmousemove = null;
  }
  
  function shiftSlide(dir, action) {
    items.classList.add('shifting');
    
    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;      
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;      
      }
    };
    
    allowShift = false;
  }
    
  function checkIndex (){
    items.classList.remove('shifting');

    if (index == -1) {
      items.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
    }

    if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }
    
    allowShift = true;
  }
}
于 2022-03-03T15:56:44.440 回答