html部分：
<div id="topNav" class="swiper-container swiper-container-horizontal swiper-container-free-mode">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-281px, 0px, 0px);">
<a class="swiper-slide active" onclick="window.location.href='/main/detail/22/1/0'">
<span>
<img src="/uploads/20170927/d6620c440c1110c2b97555eb60302698.jpg">
</span>
推荐
</a>
<a class="swiper-slide" onclick="window.location.href='/main/detail/22/2/0'">
<span>
<img src="/uploads/20170927/273b2bdd4495d7b9f5555672caec37e8.jpg">
</span>
最新
</a>
<a class="swiper-slide" onclick="window.location.href='/main/detail/22/3/0'">
<span>
<img src="/uploads/20170927/5bef359383128779d1aed1d5dc496093.jpg">
</span>
清仓
</a>
<a class="swiper-slide swiper-slide-prev" onclick="window.location.href='/main/detail/22/314/0'">
<span>
<img src="/uploads/20170928/8d9ee564b2f8a77f302fa683a79ae272.jpg">
</span>
BAUER </a>
<a class="swiper-slide swiper-slide-active" onclick="window.location.href='/main/detail/22/309/0'">
<span>
<img src="/uploads/20170927/cd2663b5f35ec8bca4e658cce3e78436.jpg">
</span>
CCM </a>
<a class="swiper-slide swiper-slide-next" onclick="window.location.href='/main/detail/22/315/0'">
<span>
<img src="/uploads/20170928/e10e99f4922f00327092bd2bd638835f.jpg">
</span>
GARF </a>
<a class="swiper-slide" onclick="window.location.href='/main/detail/22/321/0'">
<span>
<img src="/uploads/20170928/e42f9f67d49981372bc15aa137a88773.png">
</span>
花样 </a>
<a class="swiper-slide" onclick="window.location.href='/main/detail/22/316/0'">
<span>
<img src="/uploads/20170928/fceec9f4e3235283c47b13b116c4a7f1.jpg">
</span>
守门员 </a>
<a class="swiper-slide" onclick="window.location.href='/main/detail/22/317/0'">
<span>
<img src="/uploads/20170928/ad0d6fd771548abd95ab109c3014a766.jpg">
</span>
冰鞋配件 </a>
<a class="swiper-slide" onclick="window.location.href='/main/detail/22/363/0'">
<span>
<img src="/uploads/20170928/40304a25f33f12b46e0d9e668b459616.jpg">
</span>
其他品牌 </a>
</div>
</div>
css部分
#topNav{
height:
1.04
rem;
margin-top:
1
rem;
border-bottom:
.01
rem solid
#DDDDDD;
}
#topNav .
swiper-slide {
/*font-family: PingFangMedium;*/
letter-spacing:
0
px;
width:
1.26
rem;
padding-top:
.1
rem;
text-align:
center;
font-size:
.2
rem;
}
#topNav .
swiper-slide span{
transition:
all
.3
s ease;
display:
block;
color:
#878787;
height:
.583
rem;
vertical-align:
middle;
/*margin-bottom: .1rem;*/
}
#topNav .
active{
border-bottom:
.04
rem solid
#F5B800;
}
#topNav .
swiper-slide img{
display:
inline-block;
margin:
0
auto;
vertical-align:
middle;
max-height:
.583
rem;
}
swiper初始化
var
mySwiper =
new
Swiper(
'#topNav', {
freeMode:
true,
freeModeMomentumRatio:
0.5,
slidesPerView:
'auto',
});
swiperWidth =
mySwiper.
container[
0].
clientWidth
maxTranslate =
mySwiper.
maxTranslate();
maxWidth = -
maxTranslate +
swiperWidth /
2
//$(".swiper-container").on('touchstart', function(e) {
//e.preventDefault()
//})
//mySwiper.on('tap', function(swiper, e) {
//e.preventDefault()
slide =
$(
"#topNav .active")[
0]
slideLeft =
slide.
offsetLeft
slideWidth =
slide.
clientWidth
slideCenter =
slideLeft +
slideWidth /
2
// 被点击slide的中心点
console.
log(
slide);
mySwiper.
setWrapperTransition(
300)
if (
slideCenter <
swiperWidth /
2) {
mySwiper.
setWrapperTranslate(
0)
}
else if (
slideCenter >
maxWidth) {
mySwiper.
setWrapperTranslate(
maxTranslate)
}
else {
nowTlanslate =
slideCenter -
swiperWidth /
2
mySwiper.
setWrapperTranslate(-
nowTlanslate)
}