[Swiper] PC网站常用焦点图官方案例下载链接已失效，这里对官方的进行了补充和修改，swiper3和swiper4两种写法。
1、swiper3案例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>常用焦点图</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/css/swiper-3.4.2.min.css">
</head>
<body>
<style>
body {
padding: 0;
margin: 0;
}
.pc-slide {
width: 500px;
margin: 0 auto;
}
.view .swiper-container {
width: 500px;
height: 500px;
}
.view .arrow-left {
background: url(static/images/index_tab_l.png) no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -25px;
width: 28px;
height: 51px;
z-index: 10;
}
.view .arrow-right {
background: url(static/images/index_tab_r.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -25px;
width: 28px;
height: 51px;
z-index: 10;
}
.preview {
width: 100%;
margin-top: 10px;
position: relative;
}
.preview .swiper-container {
width: 430px;
height: 82px;
margin-left: 35px;
}
.preview .swiper-slide {
width: 87px;
height: 82px;
cursor:pointer;
}
.preview .slide6 {
width: 82px;
}
.preview .arrow-left {
background: url(static/images/feel3.png) no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -9px;
width: 9px;
height: 18px;
z-index: 10;
}
.preview .arrow-right {
background: url(static/images/feel4.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -9px;
width: 9px;
height: 18px;
z-index: 10;
}
.preview img {
padding: 1px;
}
.preview .active-nav img {
padding: 0;
border: 1px solid #F00;
}
</style>
<div>
<div>
<div>
<a href="#"></a>
<a href="#"></a>
<div>
<div>
<a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="static/picture/b1.jpg" alt=""></a>
</div>
<div>
<a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="static/picture/b2.jpg" alt=""></a>
</div>
<div>
<a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="static/picture/b3.jpg" alt=""></a>
</div>
<div>
<a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="static/picture/b4.jpg" alt=""></a>
</div>
<div>
<a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="static/picture/b5.jpg" alt=""></a>
</div>
<div>
<a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="static/picture/b6.jpg" alt=""></a>
</div>
</div>
</div>
</div>
<div>
<a href="#"></a>
<a href="#"></a>
<div>
<div>
<div class="swiper-slide active-nav">
<img src="static/picture/s1.jpg" alt="">
</div>
<div>
<img src="static/picture/s2.jpg" alt="">
</div>
<div>
<img src="static/picture/s3.jpg" alt="">
</div>
<div>
<img src="static/picture/s4.jpg" alt="">
</div>
<div>
<img src="static/picture/s5.jpg" alt="">
</div>
<div class="swiper-slide slide6">
<img src="static/picture/s6.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="static/js/jquery-3.2.1.min.js"></script>
<script src="static/js/swiper-3.4.2.jquery.min.js"></script>
<script>
var viewSwiper = new Swiper('.view .swiper-container', {
onSlideChangeStart: function() {
updateNavPosition()
}
})
$('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
e.preventDefault()
if (viewSwiper.activeIndex == 0) {
viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
return
}
viewSwiper.slidePrev()
})
$('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
e.preventDefault()
if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
viewSwiper.slideTo(0, 1000);
return
}
viewSwiper.slideNext()
})
var previewSwiper = new Swiper('.preview .swiper-container', {
//visibilityFullFit: true,
slidesPerView: 'auto',
allowTouchMove: false,
onTap: function() {
viewSwiper.slideTo(previewSwiper.clickedIndex)
}
})
function updateNavPosition() {
$('.preview .active-nav').removeClass('active-nav')
var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
console.log(activeNav);
// if (!activeNav.hasClass('swiper-slide-visible')) {
// if (activeNav.index() > previewSwiper.activeIndex) {
// var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
// previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
// } else {
// previewSwiper.slideTo(activeNav.index())
// }
// }
}
</script>
</body>
</html>2、swiper4写法：swiper4的写法和swiper3写法差不多一样，只是函数不一样，及引入文件不一样。
2.1、引入css和js
link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.0/css/swiper.min.css"> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
2.2、将第一个onTab函数修改为如下，即可。
var viewSwiper = new Swiper('.view .swiper-container', {
on: {
slideChangeTransitionStart: function(){
updateNavPosition()
},
}
})2.3、将如下代码
onTap: function() {
viewSwiper.slideTo(previewSwiper.clickedIndex)
}改为
on:{
tap: function(){
viewSwiper.slideTo(previewSwiper.clickedIndex)
},
}附件：demo下载：https://qiniu.tpxhm.top/code/swiper.zip
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）