console
~function ($) {
let computed = ()=> {
let $HTML = $(document.documentElement),
winW = $HTML[0].clientWidth,
value = 100;
value = winW < 640 ? winW / 640 * 100 : value;
$HTML.css('fontSize', value);
};
computed();
$(window).on('resize', computed);
}(Zepto);
let bannerExample = new Swiper('.bannerBox', {
autoplay: 3000,
autoplayDisableOnInteraction: false,
loop: true,
pagination: '.swiper-pagination',
paginationType: 'fraction',
//=>有关于图片延迟加载的
lazyLoading: true,
lazyLoadingInPrevNext: true
});
let liveExample = new Swiper('.liveCon', {
direction: 'vertical',
autoplay: 3000,
loop: true,
onlyExternal: true //=>不能手动拖拽
});
<section class="swiper-container bannerBox">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="https://img1.360buyimg.com/da/s828x404_jfs/t19783/347/2056428700/119568/f9e2527/5ae1a378Naf88ce12.jpg!cr_1125x549_0_72.dpg" alt="">
<p>岳云鹏网店上黑榜</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="https://img1.360buyimg.com/da/s826x404_jfs/t19171/85/1943477250/98705/bd8a0c4c/5adec45eN1662ac23.jpg!cr_1125x549_0_72.dpg" alt="">
<p>港大新药清除艾滋</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="https://m.360buyimg.com/mobilecms/s828x404_jfs/t18301/77/2024136805/184874/220751b2/5ae14855Nbcb04e73.jpg!cr_1125x549_0_72!q70.jpg.dpg" alt="">
<p>阿里投资人离职</p>
</a>
</div>
</div>
<div class="swiper-pagination"></div>
</section>
<section class="liveBox">
<span class="tag"></span>
<div class="swiper-container liveCon">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#">岳云鹏网店上黑榜</a></div>
<div class="swiper-slide"><a href="#">港大新药清除艾滋</a></div>
<div class="swiper-slide"><a href="#">阿里投资人离职</a></div>
<div class="swiper-slide"><a href="#">央行严批支付乱象</a></div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.2/css/swiper.css" />
<script src="https://cdn.bootcss.com/Swiper/3.4.1/js/swiper.js"></script>
*{margin: 0; padding:0 ;}
ul,li{
list-style: none;
}
html {
font-size: 100px;
overflow-x: hidden;
}
.bannerBox {
position: relative;
height: 3.4rem;
}
.swiper-wrapper, .swiper-slide {
height: 100%;
}
.swiper-slide {
position: relative;
}
.swiper-slide a {
display: block;
width: 100%;
height: 100%;}
.swiper-slide a img {
display: block;
width: 100%;
height: 100%;
}
.swiper-slide a p {
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: .6rem;
line-height: .6rem;
text-indent: .2rem;
color: @white;
font-size: .28rem;
background: rgba(0, 0, 0, .5);
}
.swiper-pagination {
position: absolute;
left: auto;
right: 0;
bottom: 0;
z-index: 10;
width: 1rem;
height: .6rem;
line-height: .6rem;
text-align: center;
font-size: .28rem;
color: rgba(255, 255, 255, 0.5);
}
.swiper-pagination span:nth-of-type(1) {
font-weight: bold;
color: @white;
}
.liveBox{
}
.liveBox {
position: relative;
margin: .16rem 0;
height: 0.8rem;
background: #FFF;
font-size: 0.2rem;
overflow: hidden;
}