今天需要写一个轮播的效果,查找网上资源,可以使用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就消失,无法捕捉