如何在 slider 中的图像上添加点击阈值？问题是，如果我通过单击并拖动图片将 slider 移动到另一个页面，则会选择该图片。
如何添加阈值或其他东西，以便在我从一张幻灯片移动到另一张幻灯片时不会被选中？
第二个问题可能是:如何在不移动的情况下选择图像(因为如果我选择一个，其他 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");
});
最佳答案
两个问题。首先，您会收到 2.5px 边框的舍入错误。尝试将其更改为 2 或 3px。其次，边框实际上在图像周围添加了 2-3 像素的边距，这导致它们跳动。尝试在添加边框时消失的图像周围留出边距。像这样:
.image {
width:180px;
height:180px;
margin: 3px;
}
.selected {
border-style: solid;
border-color: black;
border-width: 3px;
margin: 0;
}
至于点击图片时不滑动。根据 Swiper API 添加 noSwiping: true在初始化您的刷卡器并添加类时 swiper-no-swiping到您不想滑动的任何元素。
我已将其添加到 3 <img>以下 jsfiddle 中第一页上的标记:
滑动时不高亮/不高亮试试下面的代码:
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");
}
});
关于javascript - 如何添加阈值 onclick() jQuery？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22508834/