Javascript 根据屏幕大小使用不同的js规则

你好，我想用这个，但我有一个问题

我的目标是，当我的屏幕最小宽度为768px时，仅显示我的8张图像中的.web class图像；当我的屏幕最大宽度为768px时，仅显示我的8张图像中的.phone class图像

所以当我们看到4张图片时，我们回到第一张

使用我的css技术，我可以从图像5到8看到白色背景，而不是从1到4看到背景图像

@media only screen and (min-width: 768px) {
li.web { display: block; }
li.phone { display: none; }
}

@media only screen and (max-width: 768px) {
li.web { display: none; }
li.phone { display: block; }
}









大多数滑块在加载时呈现其内容，之后不会更改。因此，当您通过css隐藏图像时，将不会有一个包含4个图像的滑块

我建议两个滑块。一个用于电话，一个用于网络：

<ul id="cbp-bislideshow-web" class="cbp-bislideshow web">
 <li>  <img src="index/img/1.jpg" alt="image01"/></li>
 <li>  <img src="index/img/2.jpg" alt="image02"/></li>
 <li>  <img src="index/img/3.jpg" alt="image03"/></li>
 <li>  <img src="index/img/4.jpg" alt="image04"/></li>
</ul>

<ul id="cbp-bislideshow-phone" class="cbp-bislideshow phone">
 <li>  <img src="index/img/1.jpg" alt="image01"/></li>
 <li>  <img src="index/img/2.jpg" alt="image02"/></li>
 <li>  <img src="index/img/3.jpg" alt="image03"/></li>
 <li>  <img src="index/img/4.jpg" alt="image04"/></li>
</ul> 

@media only screen and (min-width: 768px) {
 .cbp-bislideshow.web   { display:block; }
 .cbp-bislideshow.phone { display:none; }
}


@media only screen and (max-width: 768px) {
 .cbp-bislideshow.web   { display:none; }
 .cbp-bislideshow.phone { display:block; }  
}













@仅介质屏幕和（最小宽度：768px）{
.cbp-bislideshow.web{display:block；}
.cbp-bislideshow.phone{display:none；}
}
@仅介质屏幕和（最大宽度：768px）{
.cbp-bislideshow.web{display:none；}
.cbp-bislideshow.phone{display:block；}
}

编辑：
您的插件没有在滑块元素中循环
（l=$（“#cbp bislideshow网站，#cbp bislideshow手机”）=2个元素）
（l.imagesLoaded（函数（）{=初始化一个滑块的函数）
并且只创建一个滑块

我认为有两种解决办法：
1.更改一页上多个滑块的滑块代码
2.寻找另一个在一个页面上支持多个滑块的滑块
尝试构建两个不同的滑块：


@仅媒体屏幕和（最小宽度：768px）{
.web{display:block；}
.phone{显示：无；}
}
@仅介质屏幕和（最大宽度：768px）{
.web{显示：无；}
.phone{显示：块；}
}











ul上有CSS吗？显示器上不应留下空白。我猜幻灯片是在加载时计算所有图像的宽度。更改时，您可能需要让它重新校准。在不了解更多细节的情况下，不可能真正为您提供更多帮助。构建两个完全独立的幻灯片，然后隐藏一个或另一个而不是隐藏单个图像。我试图复制滑块并逐个隐藏，但运气不佳，可能是我做错了？@fatyfatoumata我将您的代码移到了一个片段中，以便您可以演示该问题。我将图像替换为链接图像，以便您可以看到结果。但看起来它正在做预期的事情。你可以全屏显示片段并更改宽度以触发CSS。一些滑块插件无法在一个页面上加载两个滑块，因为它们使用相同的ID。@Blazemonger我这样做了，但对我不起作用，你能在最后阅读我的更新问题并告诉我我是否做错了什么真正的问题是我们没有插件代码，因此，我们无法修复调用时出现的问题。您想要什么，页面链接，JSFIDLE，或者如果您需要，我可以复制所有代码？我更新我的问题并添加滑块的所有html、css和jscode，希望它能帮到您，可能是这一行$（function（）{cbpBGSlideshow.init（）；}）中的问题；因为我们更改了滑块@Blazemonger的ID和类