Question

如何在滑块中的图像上添加点击阈值？问题是，如果我通过单击并拖动图片将滑块移动到另一个页面，则会选择此页面。

当我从一张幻灯片移动到另一张幻灯片时，如何添加阈值或其他内容以使其无法被选中？

第二个问题可能是：如何在不移动的情况下选择图像（因为如果我选择其他2个正在移动）并且我希望它们在滑块上居中（它们之间的距离相同，底部，顶部，左侧和右侧）

我希望这个效果适用于我使用jQuery和jQuery mobile的phonegap移动应用程序。我也使用swiper插件。

这是代码：http://jsfiddle.net/alecstheone/pDNJ7/

HTML：

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <img class="image" src="http://athleticsfrontier.com/wp-content/uploads/2010/07/cal-logo.jpg">
        <img class="image" src="http://rs1228.pbsrc.com/albums/ee443/aneesha_scott-morton/cute-puppies.jpg~c200">
        <img class="image" src="http://cdn3.www.babble.com/wp-content/uploads/2014/03/pup3-200x200.jpg">
      </div>
      <div class="swiper-slide blue-slide">
        <img class="image" src="http://th09.deviantart.net/fs47/200H/i/2012/019/4/c/husky_puppy_1341_by_sooper_husky-d274ud4.jpg">
        <img class="image" src="http://careforyourpuppy.org/wp-content/themes/headlines/thumb.php?src=wp-content/uploads/2010/12/puppy.jpg&w=200&h=200&zc=1&q=90">
        <img class="image" src="http://khloekardashian.celebuzz.com/wp-content/uploads/2013/03/Khloe-Kardashian-Lamar-Odom-New-Puppy-3-200x200.jpg">
      </div>
    </div>
    <div class="pagination"></div>
  </div>
</body>

CSS：

/*
 * Swiper 2.5.1
 * Mobile touch slider and framework with hardware accelerated transitions
 *
 * http://www.idangero.us/sliders/swiper/
 *
.swiper-container {
    margin:0 auto;
    position:relative;
    overflow:hidden;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    /* Fix of Webkit flickering */
    z-index:1;
}
.swiper-wrapper {
    position:relative;
    width:100%;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease;

    -moz-transition-property:-moz-transform, left, top;
    -moz-transition-duration:0s;
    -moz-transform:translate3d(0px,0,0);
    -moz-transition-timing-function:ease;

    -o-transition-property:-o-transform, left, top;
    -o-transition-duration:0s;
    -o-transform:translate3d(0px,0,0);
    -o-transition-timing-function:ease;
    -o-transform:translate(0px,0px);

    -ms-transition-property:-ms-transform, left, top;
    -ms-transition-duration:0s;
    -ms-transform:translate3d(0px,0,0);
    -ms-transition-timing-function:ease;

    transition-property:transform, left, top;
    transition-duration:0s;
    transform:translate3d(0px,0,0);
    transition-timing-function:ease;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
}
.swiper-slide {
    float: left;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
}

/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
    /* Specify Swiper's Size: */

    /*width:200px;
    height: 100px;*/
}
.swiper-slide {
    /* Specify Slides's Size: */

    /*width: 100%;
    height: 100%;*/
}
.swiper-slide-active {
    /* Specific active slide styling: */

}
.swiper-slide-visible {
    /* Specific visible slide styling: */   

}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
    /* Stylize pagination button: */    

}
.swiper-active-switch {
    /* Specific active button style: */ 

}
.swiper-visible-switch {
    /* Specific visible button style: */    

}


/* Demo Styles */
html {
  height: 100%;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
}
.red-slide {
  background: #ca4040;
}
.blue-slide {
  background: #4390ee;
}
.orange-slide {
  background: #ff8604;
}
.green-slide {
  background: #49a430;
}
.pink-slide {
  background: #973e76;
}
.swiper-slide .title {
  font-style: italic;
  font-size: 42px;
  margin-top: 80px;
  margin-bottom: 0;
  line-height: 45px;
}
.pagination {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 10px;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #222;
  margin-right: 5px;
  opacity: 0.8;
  border: 1px solid #fff;
  cursor: pointer;
}
.swiper-visible-switch {
  background: #aaa;
}
.swiper-active-switch {
  background: #fff;
}

.image {
    width:180px;
    height:180px;
}

.selected {
    border-style: solid;
    border-color: black;
    border-width: 2.5px;
}

JS：

var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true
  })


      $(".image").click(function() {
        if($(this).hasClass("selected"))
             $(this).removeClass("selected");
        else
             $(this).addClass("selected");
     });

Answer 1

两个问题。首先，您将获得2.5px边框的舍入误差。尝试将其更改为2或3px。其次，边框有效地在图像周围添加了2-3px的边距，导致它们跳跃。尝试在添加边框时图像边缘消失。像这样：

.image {
    width:180px;
    height:180px;
    margin: 3px;
}

.selected {
    border-style: solid;
    border-color: black;
    border-width: 3px;
    margin: 0;
}

http://jsfiddle.net/pDNJ7/1/

点击图像时不要滑动。根据Swiper API，在初始化swiper时添加noSwiping: true，并将类swiper-no-swiping添加到您不想滑动的任何元素。我已将它添加到以下jsfiddle的第一页上的3个<img>标记中：

http://jsfiddle.net/pDNJ7/2/

滑动时不要突出显示/取消突出显示，请尝试以下代码：

mySwiper.addCallback('SlideChangeStart', function(swiper){
  sliding = true;
}) ;
 mySwiper.addCallback('SlideChangeEnd', function(swiper){
  sliding = false;
}) ;

      $(".image").click(function() {          
          if(!sliding){
        if($(this).hasClass("selected"))
             $(this).removeClass("selected");
        else
             $(this).addClass("selected");
          }
     });

http://jsfiddle.net/pDNJ7/3/

Answer 2

您可以检查，因为您按下鼠标按钮直到释放它，鼠标移动了一定距离，因为释放鼠标按钮后点击事件会被触发。当行进距离变高时，则压制选择。您可以将鼠标的起始位置存储在一个变量中，并在单击事件中进行检查。

$(".image").click(function() {
   if(distancetravelled>treshhold)
   {
       if($(this).hasClass("selected"))
            $(this).removeClass("selected");
       else
            $(this).addClass("selected");
   }
 });
$(".image").onmousedown(function()
{
   startposition = currentMousePos
});

如何添加阈值onclick（）jQuery？

HTML：

CSS：

JS：

2 个答案: