![](/img/trans.png)
[英]addClass when the screen resolution is less than 767px in JavaScript
[英]javascript - enable a plugin if width is greater than 767px?
我正在尝试编写一些javascript / jquery,如果视口宽度大于767px,将允许我启用幻灯片插件。
如果小于所述值,则应仅在主体中显示背景图像并禁用插件
目前,当宽度> 767px时,我无法显示该插件,但是当宽度小于767px时,背景图像确实会显示
任何帮助,将不胜感激
码:
$(window).on('resize', function() {
if($(this).width() < 767) {
$("body").addClass("backgroundImage");
$("#example, body").vegas();
window.location.reload();
} else {
$("body").removeClass("backgroundImage");
$("#example, body").vegas({
delay:10000,
transition: 'fade',
cover: true,
align: 'center',
valign: 'center',
preload: true,
preloadImage: true,
slides: [
{src: "img/slideshow/img1wB-E.jpg"},
{src: "img/slideshow/img2-2.jpg"}
]
});
window.location.reload();
return;
}
}).trigger('resize');
为什么不创建一个最小宽度为767的CSS条目,所以如果它低于该宽度,则不会显示。
@media (min-width: 767px) {
.specialSlideshow {
width: 750px; }
}
@media (min-width: 0px) {
.specialSlideshow {
display:none; }
}
因此,您可能会在幻灯片显示代码周围包装一个带有specialSlideshow类的div,如果它低于767px,则不会显示。
你包括了吗
<link rel="stylesheet" href="/js/vegas/vegas.min.css"> <script src="/js/vegas/vegas.min.js"></script>
在.html中?
您是要延迟10秒吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.