前文
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
归根到此，Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择,在PC网页端也有很好的应用！
官方API文档：https://www.swiper.com.cn/api/index.html
官方资源下载：https://www.swiper.com.cn/download/index.html
引入资源
<link href="dist/css/swiper.min.css" rel="stylesheet"> <!-- 注意，必须强制添加rel节点，不然不能正常使用 --> <script src="dist/js/swiper.min.js"></script>
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="dis/css/swiper.min.css" rel="stylesheet"> <!---->
<style>
/* 设置轮播组件的高宽 */
.swiper-container {
width:1500px;
height: 420px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/one.png"></div>
<div class="swiper-slide"><img src="images/two.png"></div>
<div class="swiper-slide"><img src="images/three.png"></div>
<div class="swiper-slide"><img src="images/four.png"></div>
<div class="swiper-slide"><img src="images/five.png"></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>
<script src="dis/js/swiper.min.js"></script>
<script src="dis/js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var mySwiper = new Swiper (‘.swiper-container‘, {
direction: ‘horizontal‘, // 水平切换选项,
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ‘.swiper-pagination‘,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ‘.swiper-button-next‘,
prevEl: ‘.swiper-button-prev‘,
},
// 如果需要滚动条
// scrollbar: {
// el: ‘.swiper-scrollbar‘,
// },
//自动播放
autoplay: {
autoplay:true,//自动播放
delay:3000, //自动切换的时间间隔，单位ms
disableOnInteraction :false //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
},
on:{
autoplayStart:function(){
console.log(‘开启自动切换‘);
},
autoplayStop:function(){
console.log(‘关闭自动切换‘);
}
}
})
})
</script>
</body>
</html>
效果
原文地址：https://www.cnblogs.com/hzb462606/p/11237144.html
时间： 2024-08-29 04:31:33