swiper3、swiper4网站常用焦点图案例及demo下载

2021-03-16   阅读:268   分类:前端    标签: 轮播插件

[Swiper] PC网站常用焦点图官方案例下载链接已失效,这里对官方的进行了补充和修改,swiper3和swiper4两种写法。

image.png

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


【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/628.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×