分享一波代码........类库的强大我等已跪.............
代码如下，方法详细注释了......
在这要提一下loop这个属性了 ——><div class="swiper-slide Slide1">Slide 1</div>这里要在赋一个新的类名，然后loop才能正常的循环切换图片，要不然会出bug，具体的话.....我也不是很清楚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="swiper-3.4.2.min.css">
<style>
.swiper-container {
width: 700px;
height: 400px;
}
.swiper-slide{
font-size: 50px;
}
.Slide1{
background:url('img5.jpg');
background-size: 700px 400px;
}
.Slide2{
background:url('img4.jpg');
background-size: 700px 400px;
}
.Slide3{
background:url('img3.jpg');
background-size: 700px 400px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide Slide1">Slide 1</div>
<div class="swiper-slide Slide2">Slide 2</div>
<div class="swiper-slide Slide3">Slide 3</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>
<script src="swiper-3.4.2.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',垂直方向上的鼠标点击拖拽切换
direction: 'horizontal',//水平方向上的鼠标点击拖拽切换
loop: true,
//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。图片自动播放（单位：毫秒） 2秒切换一次
autoplay : 2000,
//speed是指在鼠标拖拽结束后图片以300毫秒滑动到运动位置
speed:300,
//用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触 碰，拖动，点击pagination等。
// autoplayDisableOnInteraction : true,//用户操作之后就不会自动切换图片了
autoplayDisableOnInteraction : false,
//如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）就是说自动切换到最后一张图片后就不会再由自动切换图片的效果了
autoplayStopOnLast : true,
//设定初始化时slide的索引，在刷新页面最先看到的是图片3
initialSlide:2,
//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
grabCursor : true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
</script>
</html>
image.png
网友评论