我想知道如何修正触控式滑条

时间：2018-08-10 11:28:16

标签： javascript jquery html css

我想使用KEVIN Foley的脚本“触摸友好的滑块”。但有一个问题。当我添加5张幻灯片时，就无法再滑动了。脚本在Transform: translate -600px处停止工作
我已经尝试了很长时间了，但是找不到。

原始代码

https://css-tricks.com/the-javascript-behind-touch-friendly-sliders/

这是我的代码（编辑）

https://codepen.io/anon/pen/KBbbmY


$(function(){
if (navigator.msMaxTouchPoints) {

  $('#slider').addClass('ms-touch');

  $('#slider').on('scroll', function() {
    $('.slide-image').css('transform','translate3d(-300px,0,0)');
  });

} else {

  var slider = {

    el: {
      slider: $("#slider"),
      holder: $(".holder"),
      imgSlide: $(".slide-image")
    },

    slideWidth:300,
    touchstartx: undefined,
    touchmovex: undefined,
    movex: undefined,
    index: 0,
    longTouch: undefined,
    
    init: function() {
      this.bindUIEvents();
    },

    bindUIEvents: function() {

      this.el.holder.on("touchstart", function(event) {
        slider.start(event);
      });

      this.el.holder.on("touchmove", function(event) {
        slider.move(event);
      });

      this.el.holder.on("touchend", function(event) {
        slider.end(event);
      });

    },

    start: function(event) {
      // Test for flick.
      this.longTouch = false;
      setTimeout(function() {
        window.slider.longTouch = true;
      }, 250);

      // Get the original touch position.
      this.touchstartx =  event.originalEvent.touches[0].pageX;

      // The movement gets all janky if there's a transition on the elements.
      $('.animate').removeClass('animate');
    },

    move: function(event) {
      // Continuously return touch position.
      this.touchmovex =  event.originalEvent.touches[0].pageX;
      // Calculate distance to translate holder.
      this.movex = this.index*this.slideWidth + (this.touchstartx - this.touchmovex);
      // Defines the speed the images should move at.
      var panx = 100-this.movex/6;
      if (this.movex <= 2400) { // Makes the holder stop moving when there is no more content.
        this.el.holder.css('transform','translate3d(-' + this.movex + 'px,0,0)');
      } 
      
      if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving.
        this.el.imgSlide.css('transform','translate3d(-' + panx + 'px,0,0)');
      }
    },

    end: function(event) {
      // Calculate the distance swiped.
      var absMove = Math.abs(this.index*this.slideWidth - this.movex);
      // Calculate the index. All other calculations are based on the index.
      if (absMove > this.slideWidth/2 || this.longTouch === false) {
        if (this.movex > this.index*this.slideWidth && this.index < 2) {
          this.index++;
        } else if (this.movex < this.index*this.slideWidth && this.index > 0) {
          this.index--;
        }
      }      
      // Move and animate the elements.
      this.el.holder.addClass('animate').css('transform', 'translate3d(-' + this.index*this.slideWidth + 'px,0,0)');
     // this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 100-this.index*50 + 'px,0,0)');

    }

  };

  slider.init();
}
});
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);

.animate {
  transition: transform 0.3s ease-out;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.slider-wrap {
  width: 300px;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -225px;
}

.slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ms-touch.slider {
  overflow-x: scroll;
  overflow-y: hidden;
  
  -ms-overflow-style: none;
  /* Hides the scrollbar. */
  
  -ms-scroll-chaining: none;
  /* Prevents Metro from swiping to the next tab or app. */
  
  -ms-scroll-snap-type: mandatory;
  /* Forces a snap scroll behavior on your images. */
  
  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
  /* Defines the y and x intervals to snap to when scrolling. */
}

.holder {
  width: 1500px;
  max-height: 500px;
  height: 100%;
  overflow-y: hidden;
}

.slide-wrapper {
  width: 300px;
  height: 100%;
  float: left;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.slide {
  height: 100%;
  position: relative;
}

.temp {
  position: absolute;
  z-index: 1;
  color: white;
  font-size: 100px;
  bottom: 15px;
  left: 15px;
  font-family: 'Josefin Slab', serif;
  font-weight: 100;
}

.slide img {
  position: absolute;
  z-index: 0;
  transform: translatex(-100px);
}

.slide:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(transparent, black);
}

.slide div {
  width: 300px;
  height: 500px;
  z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrap">
  <div class="slider" id="slider">
    <div class="holder">
      <div class="slide-wrapper">
        <div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg" /></div>
        <span class="temp">74</span>
      </div>
      <div class="slide-wrapper">
        <div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg" /></div>
        <span class="temp">64</span>
      </div>
      <div class="slide-wrapper">
        <div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /></div>
        <span class="temp">82</span>
      </div>
            <div class="slide-wrapper">
        <div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /></div>
        <span class="temp">92</span>
      </div>
            <div class="slide-wrapper">
        <div class="slide"><img class="slide-image" src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /></div>
        <span class="temp">102</span>
      </div>
    </div>
  </div>
</div>

或

https://jsfiddle.net/nuengwispy/30dp4n8j/1/

当您测试“ F12”和“ Ctrl + Shift + M”时

我想知道如何解决 “触摸式滑条”，直到滑到最后为止。

1 个答案:

答案 0 :(得分：0)

最后，我选择使用“ weixhen”代码，并做了一些修改。

请在进行测试时：F12和Ctrl + Shift + M 

 $(function() {

   var width_container_touch_slide_recommend = 380;
   var div_touch_slide_recommend = $("#touch_slide_recommend");
   var items_touch_slide_recommend = $("#ul_touch_slide_recommend > li");
   var length_touch_slide_recommend = items_touch_slide_recommend.length;
   var star_touch_slide_recommend = 0;
   var distance_touch_slide_recommend = 0;
   var stop_touch_slide_recommend = 0;
   var max_distance_recommend = ((items_touch_slide_recommend.length) * width_container_touch_slide_recommend) - width_container_touch_slide_recommend;
   div_touch_slide_recommend.css("width", width_container_touch_slide_recommend + "px");
   window.touch_slide_recommend.addEventListener("touchstart", function(e) {
     star_touch_slide_recommend = e.touches[0].clientX;
     window.ul_touch_slide_recommend.style.transition = '0ms';
   });

   window.touch_slide_recommend.addEventListener('touchmove', function(e) {
     distance_touch_slide_recommend = stop_touch_slide_recommend + star_touch_slide_recommend - e.touches[0].clientX
     window.ul_touch_slide_recommend.style.transform = 'translateX(' + (-distance_touch_slide_recommend) + 'px)';
   });

   window.touch_slide_recommend.addEventListener('touchend', function(e) {
     fluentslide_recommend();
     stop_touch_slide_recommend = distance_touch_slide_recommend;
   });

   var fluentslide_recommend = function() {
     index = Math.round(distance_touch_slide_recommend / width_container_touch_slide_recommend);
     if (distance_touch_slide_recommend % width_container_touch_slide_recommend !== 0) {
       distance_touch_slide_recommend = index * width_container_touch_slide_recommend;
     }

     if (distance_touch_slide_recommend < 0) {
       distance_touch_slide_recommend = 0;
     }

     if (distance_touch_slide_recommend > max_distance_recommend) {
       distance_touch_slide_recommend = max_distance_recommend;
     }
     window.ul_touch_slide_recommend.style.transition = '500ms';
     window.ul_touch_slide_recommend.style.transform = 'translateX(' + (-distance_touch_slide_recommend) + 'px)';
   }

 });
 $(function() {
   var width_container_touch_slide_best = 480;
   var div_touch_slide_best = $("#touch_slide_best");
   var items_touch_slide_best = $("#ul_touch_slide_best > li");
   var length_touch_slide_best = items_touch_slide_best.length;
   var star_touch_slide_best = 0;
   var distance_touch_slide_best = 0;
   var stop_touch_slide_best = 0;
   var max_distance_best = ((items_touch_slide_best.length) * width_container_touch_slide_best) - width_container_touch_slide_best;
   div_touch_slide_best.css("width", width_container_touch_slide_best + "px");
   window.touch_slide_best.addEventListener("touchstart", function(e) {
     star_touch_slide_best = e.touches[0].clientX;
     window.ul_touch_slide_best.style.transition = '0ms';
   });

   window.touch_slide_best.addEventListener('touchmove', function(e) {
     distance_touch_slide_best = stop_touch_slide_best + star_touch_slide_best - e.touches[0].clientX
     window.ul_touch_slide_best.style.transform = 'translateX(' + (-distance_touch_slide_best) + 'px)';
   });

   window.touch_slide_best.addEventListener('touchend', function(e) {
     fluentslide_best();
     stop_touch_slide_best = distance_touch_slide_best;
   });

   var fluentslide_best = function() {
     index = Math.round(distance_touch_slide_best / width_container_touch_slide_best);
     if (distance_touch_slide_best % width_container_touch_slide_best !== 0) {
       distance_touch_slide_best = index * width_container_touch_slide_best;
     }

     if (distance_touch_slide_best < 0) {
       distance_touch_slide_best = 0;
     }

     if (distance_touch_slide_best > max_distance_best) {
       distance_touch_slide_best = max_distance_best;
     }
     window.ul_touch_slide_best.style.transition = '500ms';
     window.ul_touch_slide_best.style.transform = 'translateX(' + (-distance_touch_slide_best) + 'px)';
   }

 });
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0px;
}

[id^="touch_slide_"] {
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  position: relative;
}

[id^="ul_touch_slide_"] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Recommend</h1>
<div id="touch_slide_recommend">
  <ul id="ul_touch_slide_recommend">
    <li><img src="http://placehold.it/380x285" alt=""></li>
    <li><img src="http://placehold.it/380x285" alt=""></li>
    <li><img src="http://placehold.it/380x285" alt=""></li>
    <li><img src="http://placehold.it/380x285" alt=""></li>
    <li><img src="http://placehold.it/380x285" alt=""></li>
  </ul>
</div>
<h1>Best Seller</h1>
<div id="touch_slide_best">
  <ul id="ul_touch_slide_best">
    <li><img src="http://placehold.it/480x285" alt=""></li>
    <li><img src="http://placehold.it/480x285" alt=""></li>
    <li><img src="http://placehold.it/480x285" alt=""></li>
    <li><img src="http://placehold.it/480x285" alt=""></li>
    <li><img src="http://placehold.it/480x285" alt=""></li>
  </ul>
</div>

的

http://jsfiddle.net/nuengwispy/0tmsLz2p/

原始代码：https://codepen.io/weixhen/pen/QggGVM（感谢微信）

相关问题
最新问题