今天设计提了个问题,因为mac上是2dpr的,所以需要2倍图。官网banner图使用img标签,不好改成background。于是我自己加了另外一组图片,使用display来控制显示与否。
结构如下
<ul class="banners banner-1x">
<li></li>
<li></li>
<li></li>
.....
</ul>
<ul class="banners banner-2x">
<li></li>
<li></li>
<li></li>
.....
</ul>
<style>
.banner-2x {
display: none;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.banner-1x {
display:none;
}
.banner-2x {
display:block;
}
}
</style>
jquery 写轮播图 获取了.banners 下的li,但是获取了两个banners下的li,轮播图逻辑不对。故改为
var bannersLi;
var bannersLiImgs;
if($('.banner-2x').css("display") == "none"){
bannersLi = $(".banner-1x li");
bannersLiImgs = $(".banner-1x li img");
}else {
bannersLi = $(".banner-2x li");
bannersLiImgs = $(".banner-2x li img");
}
先判断一下展示的是哪个ul,再取值