今天需要写一个轮播的效果，查找网上资源，可以使用swipe和swiper，其中swipe我只找到可以左右滑动，并且可以无限滑动的一种轮播方式。
swiper是一个轮播资源较多的插件，可以查看官网：https://www.swiper.com.cn/
其中我需要的要求：1，全屏展示 2，自动无限播放 3，可控制播放时间和切换速度
因此，我从中选择出了4中类型：1，左右的轮播 （200-infinite-loop） 2，上下的轮播 （090-vertical）
3，立方体形式的滚动 （230-effect-cube） 4，两面形式的滚动 （250-effect-flip.html）
上下的轮播 ：
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
#vertical {
width: 100%;
height: 100%;
}
.swiper-slide {
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<div id="vertical">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(test/1.jpg)">1</div>
<div class="swiper-slide" style="background-image:url(test/2.jpg)">2</div>
<div class="swiper-slide" style="background-image:url(test/3.jpg)">3</div>
<div class="swiper-slide" style="background-image:url(test/4.jpg)">4</div>
<div class="swiper-slide" style="background-image:url(test/5.jpg)">5</div>
</div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('#vertical', {
direction: 'vertical',
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
speed: 1000,
loop:true,
continuous: true, //无限循环的图片切换效果
});
</script>
上下轮播形式的侧边有滚动条这个看起来很不舒服，但是还没办法取消掉，不知道展示时是否还存在，使用F12就消失，无法捕捉
2963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
