Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择,在PC网页端也有很好的应用!
官方资源下载:https://www.swiper.com.cn/download/index.html 最新版本6.0
官方中文教程:https://www.swiper.com.cn/usage/index.html
官方API文档:https://www.swiper.com.cn/api/index.html
引入资源:
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
<style type="text/css">
/*容器*/
.swiper-container {
width: 700px;
height: 350px;
/*背景图片*/
background: url(img/bg_1.jpg);
background-size: cover;
/*分页器颜色*/
--swiper-pagination-color:white;/* 两种都可以 */
/*前进后退按钮*/
--swiper-navigation-color: white;/* 单独设置按钮颜色 */
--swiper-navigation-size: 40px;/* 设置按钮大小 */
}
.swiper-container img{
width: 100%;
}
</style>
</head>
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596209683_1180x600.png?max_age=31536000"/>
</div>
<div class="swiper-slide">
<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596209441_1180x600.png?max_age=31536000"/>
</div>
<div class="swiper-slide">
<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596122566_0e54d4ac-5ddb-48f8-838e-61b36271f529.png?max_age=31536000"/>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</body>
</html>
<!--初始化Swiper-->
<script>
var mySwiper = new Swiper ('.swiper-container', {
//默认是横向的;
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// autoplay: true,//可选选项,自动滑动
autoplay: {
delay: 1000, //1s
stopOnLastSlide: false,
disableOnInteraction: true,
},
//切换效果
// effect : 'cube',
// effect : 'flip',
// effect : 'coverflow',
// slidesPerView: 3,
// centeredSlides: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
</script>
效果:模仿QQ会员: https://vip.qq.com/