移动端wap页
HTML:1
2
3
4
5
6
7
8
9
10
11div.swiper-container
div.swiper-wrapper
div.swiper-slide
div.swiper-slide
div.swiper-slide
div.swiper-slide
//- 分页器
div.swiper-pagination
//- 按钮
div.swiper-button-next
CSS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45.swiper-container,
.swiper-wrapper,
.swiper-slide{
width: 100%;
height: 100%;
}
.swiper-pagination{
right: 10px;
top: 50%;
transform: translate(-50%, 0);
display: none;
}
.swiper-button-next{
width: r(60);
height: r(60);
border-radius: 50%;
background: url('../img/scroll-btn.png') no-repeat;
background-size: 100% 100%;
left: 50%;
top: 100%;
margin-top: r(-90);
transform: translate(-50%, 0);
}
.swiper-button-ani{
animation: swiper-btn-ani 1s linear infinite;
}
@keyframes swiper-btn-ani{
0%, 100%{
transform: translate(-50%, 0);
}
50%{
transform: translate(-50%, r(10));
}
}
.slidebox1,
.slidebox2,
.slidebox3,
.slidebox4{
width: 100%;
height: 100%;
background: url('../img/bg1.png') no-repeat center center;
background-size: cover;
overflow: hidden;
}
JS：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23// 轮播图
var mySwiper = new Swiper ('.swiper-container', {
initialSlide: 0, // 初始页数
direction: 'vertical', // 控制水平或垂直
// autoplay: 3000, // 3s自动切换
apeed: 300, // 划过的速度
// loop: true,
onlyExternal: false, /*不能拖动*/
autoplayDisableOnInteraction: false, // 用户操作后不禁用自动播放
// pagination: '.swiper-pagination', // 底部分页按钮
// paginationClickable: true, // 分页按钮可点击
// prevButton: '.swiper-button-prev'， // 左按钮
nextButton: '.swiper-button-next', // 右按钮
onInit: function (swiper) { // swiper初始化
$('.swiper-button-next').addClass('swiper-button-ani');
},
onReachEnd: function (swiper) { // 到达最后一页的事件操作
$('.swiper-button-next').removeClass('swiper-button-ani').hide();
},
onSlidePrevEnd: function (swiper) { //从最后往左切换的事件操作
$('.swiper-button-next').addClass('swiper-button-ani').show();
}
});
PC端banner轮播图
HTML:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="" target="blank" class="swiper-link"><img src="" alt="" class="swiper-img"></a>
</div>
<div class="swiper-slide">
<a href="" target="blank" class="swiper-link"><img src="" alt="" class="swiper-img"></a>
</div>
<div class="swiper-slide">
<a href="" target="blank" class="swiper-link"><img src="" alt="" class="swiper-img"></a>
</div>
</div>
<!-- 底部分页器 -->
<div class="swiper-pagination"></div>
<div class="operate-box">
<!-- 左右按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
django:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<div class="swiper-container">
<div class="swiper-wrapper">
{% for banner in banners %}
<div class="swiper-slide">
{% if banner.url %}
<a href="{{ banner.url }}" target="blank" class="swiper-link">
<img src="{{ banner.banner_img_url }}" alt="" class="swiper-img">
</a>
{% else %}
<a href="javascript:void(0)" class="swiper-link">
<img src="{{ banner.banner_img_url }}" alt="" class="swiper-img">
</a>
{% endif %}
</div>
{% endfor %}
</div>
<!-- 底部分页器 -->
<div class="swiper-pagination"></div>
<div class="operate-box">
<!-- 左右按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
CSS:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90.swiper-container{
/*width: auto;*/ /*宽度由js给出*/
width: 100%;
height: 700px;
/*position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);*/
}
.swiper-wrapper{
width: 100%;
height: 700px;
}
.swiper-slide{
width: 100%;
height: 700px;
}
/*link 和 img由开发者另行创建*/
.swiper-link{
display: inline-block;
width: 100%;
height: 700px;
position: relative;
}
.swiper-img{
height: 700px;
}
.swiper-slide-active .swiper-img{
max-width: none;
height: 700px;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
/* 1、对于banner图使用常用长图页*/
/* 由于宽度的不确定性，故增加左右按钮的父级div，方便定位 */
/* 但当父级div高度太大时会影响图片的点击效果 */
/* 故将父级div设置再banner图外，再配合margin-top手动将左右按钮设置到所需位置 */
/* 2、对于banner使用中间图片加左右填充色 */
/* 正常定位即可 */
.operate-box{
width: 960px;
height: 40px;
position: absolute;
left: 50%;
top: -40px;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
z-index: 50;
}
.swiper-pagination{
z-index: 500;
}
.swiper-container-horizontal > .swiper-pagination-bullets{
bottom: 20px;
}
.swiper-pagination .swiper-pagination-bullet{
width: 8px;
height: 8px;
border-radius: 50%;
opacity: 1;
background: #ffffff;
}
.swiper-pagination .swiper-pagination-bullet-active{
width: 20px;
height: 8px;
background: #ffffff;
border-radius: 4px;
}
.swiper-button-prev{
width: 40px;
height: 40px;
left: 0;
background: url('../img/left-btn.png');
z-index: 500;
margin-top: 370px;
}
.swiper-button-next{
width: 40px;
height: 40px;
right: 0;
background: url('../img/right-btn.png');
z-index: 500;
margin-top: 370px;
}
JS:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script>
<script>
$(function(){
// 轮播图
var mySwiper = new Swiper ('.swiper-container', {
// width: window.innerWidth,
direction: 'horizontal', // 控制水平或垂直
autoplay: 3000, // 3s自动切换
apeed: 300, // 划过的速度
loop: true,
onlyExternal: false, /*不能拖动*/
autoplayDisableOnInteraction: false, // 用户操作后不禁用自动播放
pagination: '.swiper-pagination', // 底部分页按钮
paginationClickable: true, // 分页按钮可点击
nextButton: '.swiper-button-next', // 左按钮
prevButton: '.swiper-button-prev' // 右按钮
});
});
</script>