女朋友需要在移动端实现一个轮播,她没找到合适的。 , 。 我也是服气
直接上代码:
<!DOCTYPE html>
<html>
<head>
<title>轮播啊轮播</title>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide{
width: 600px;
height: 300px;
}
.swiper-slide img{
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531822901402&di=c275112a988573345707a0e85f994944&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg"/>
</div>
<div class="swiper-slide">
<img src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=55f57896a1345982da8ae3923cf5310b/9358d109b3de9c821370156d6081800a19d8433f.jpg">
</div>
<div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531822901400&di=c792d46ebf14cac509ebb11a88417170&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb219ebc4b74543a96a58c53112178a82b801148f.jpg" alt=""></div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531822901402&di=c275112a988573345707a0e85f994944&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg"/>
</div>
<!-- 导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script>
window.onload = function() {
var mySwiper = new Swiper ('.swiper-container', {
// 轮播图的方向,也可以是vertical方向
direction:'horizontal',
//播放速度
loop: true,
// 自动播放时间
autoplay:1000,
// 播放的速度
speed:2000,
// 如果需要分页器,即下面的小圆点
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 这样,即使我们滑动之后, 定时器也不会被清除
autoplayDisableOnInteraction : false,
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
});
}
</script>
</body>
</html>
在线演示地址:地址