不同dpr下的图片问题

今天设计提了个问题，因为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，再取值