| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
|
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
| |
<title>Document</title> |
| |
|
| |
<link rel="stylesheet" href="swiper/css/swiper.css"> |
| |
<style> |
| |
html, |
| |
body { |
| |
position: relative; |
| |
height: 100%; |
| |
} |
| |
/*4. 设置容器结构的样式*/ |
| |
/*1. 最大的父容器的高度是100%和屏幕一样高*/ |
| |
|
| |
.swiper-container { |
| |
width: 100%; |
| |
height: 100%; |
| |
} |
| |
/*2. 高度设置auto没有js初始化还是没有高度 还是要再次调用JS初始化才能有高度*/ |
| |
.swiper-slide { |
| |
height: auto; |
| |
} |
| |
</style> |
| |
</head> |
| |
|
| |
<body> |
| |
|
| |
<div class="swiper-container"> |
| |
|
| |
<div class="swiper-wrapper"> |
| |
<div class="swiper-slide"> |
| |
|
| |
<ul> |
| |
<li class="active"><a href="#">热门推荐</a></li> |
| |
<li><a href="#">手机数码</a></li> |
| |
<li><a href="#">家用电器</a></li> |
| |
<li><a href="#">电脑办公</a></li> |
| |
<li><a href="#">计生情趣</a></li> |
| |
<li><a href="#">美妆护肤</a></li> |
| |
<li><a href="#">个护清洁</a></li> |
| |
<li><a href="#">汽车用品</a></li> |
| |
<li><a href="#">京东超市</a></li> |
| |
<li><a href="#">男装</a></li> |
| |
<li><a href="#">男鞋</a></li> |
| |
<li><a href="#">女装</a></li> |
| |
<li><a href="#">女鞋</a></li> |
| |
<li><a href="#">母婴童装</a></li> |
| |
<li><a href="#">运动户外</a></li> |
| |
<li><a href="#">内衣配饰</a></li> |
| |
<li><a href="#">食品生鲜</a></li> |
| |
<li><a href="#">酒水饮料</a></li> |
| |
<li><a href="#">家具家装</a></li> |
| |
<li><a href="#">家居厨具</a></li> |
| |
<li><a href="#">箱包手袋</a></li> |
| |
<li><a href="#">钟表珠宝</a></li> |
| |
<li><a href="#">图书音像</a></li> |
| |
<li><a href="#">玩具乐器</a></li> |
| |
<li><a href="#">医药保健</a></li> |
| |
<li><a href="#">宠物生活</a></li> |
| |
<li><a href="#">礼品鲜花</a></li> |
| |
<li><a href="#">农资绿植</a></li> |
| |
<li><a href="#">生活旅行</a></li> |
| |
<li><a href="#">奢侈品</a></li> |
| |
<li><a href="#">全球购</a></li> |
| |
<li><a href="#">国际名牌</a></li> |
| |
<li><a href="#">艺术邮币</a></li> |
| |
<li><a href="#">二手商品</a></li> |
| |
<li><a href="#">特产馆</a></li> |
| |
<li><a href="#">京东金融</a></li> |
| |
<li><a href="#">拍卖</a></li> |
| |
<li><a href="#">房产</a></li> |
| |
</ul> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="swiper-scrollbar"> |
| |
</div> |
| |
</div> |
| |
|
| |
<script src="swiper/js/swiper.js"> |
| |
</script> |
| |
<script> |
| |
// 3. 初始化swiper的滑动 |
| |
var swiper = new Swiper('.swiper-container', { |
| |
//垂直滑动 |
| |
direction: 'vertical', |
| |
//可以支持多个swiper-slide 可以有多个轮播图 |
| |
slidesPerView: 'auto', |
| |
//支持弹簧 |
| |
freeMode: true, |
| |
//支持滚动条 |
| |
scrollbar: { |
| |
el: '.swiper-scrollbar', |
| |
}, |
| |
//支持鼠标滚轮 只有PC能用 |
| |
mousewheel: true, |
| |
}); |
| |
</script> |
| |
</body> |
| |
|
| |
</html> |
| |
|
