如何在不同屏幕尺寸的jQuery滑块插件中显示不同的图像？
如何在不同屏幕尺寸的jQuery滑块插件中显示不同的图像？
提问于 2016-10-18 16:37:01
我正在尝试让我的jQuery滑块插件在移动和iPad设备上显示肖像图像，在大屏幕设备上显示风景图像。然而，我并没有成功。我已经尝试了几种策略，但都没有奏效。如果您知道如何做到这一点，将非常感谢您的帮助。
HTML
<div id="container">
<div id="slider" class="nivoSlider">
<img src="../Images/islal11.JPG" data-thumb="../Images/islal11.JPG" alt="Little girl wearing Tomatis headphones" class="image large"/>
<img src="../Images/bellal12.jpg" data-thumb="../Images/bellal12.jpg" alt="Girl with Tomatis headphones two" class="image large"/>
<img src="../Images/islal12.JPG" data-thumb="../Images/islal12.JPG" alt="Little girl wearing Tomatis headphones 2" class="image large"/>
<img src="../Images/bellap11.JPG" data-thumb="../Images/bellap11.JPG" alt="Girl with Tomatatis headphones" class="image small"/>
<img src="../Images/islap11.JPG" data-thumb="../Images/islap11.JPG" alt="Little girl wearing Tomatis headphones" class="image small"/>
<img src="../Images/islap12.jpg" data-thumb="../Images/islap12.jpg" alt="Girl with Tomatis headphones two" class="image small"/>
</div> <!--closing slide div-->
</div><!--closing container div-->回答 2
Stack Overflow用户
发布于 2016-10-18 17:25:20
给你的#slider id一个最大宽度，在你的css里面。
#slider{
max-width: 640px;
}你可以用@media：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp给出一个基于移动设备大小的最大宽度或最大高度
我希望这会对你有所帮助。
Stack Overflow用户
发布于 2016-10-18 22:22:36
#slider .large {
display: none;
}
@media (min-width: 640px) {
#slider .small {
display: none;
}
} 如果你确实需要删除图像的滑块正常工作，你可以使用jQuery
if( window.innerWidth < 650) { //if less than 650px remove large images
$('.#slider img.large').remove();
} else { //if equal or more than 650px remove small images
$('.#slider img.small').remove();
}确保在触发滑块之前调用此函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40103401
复制相关文章
相似问题
腾讯云开发者
