不同的背景幻灯片移动/屏幕

Different background slides for mobile/screen

本文关键字：移动 屏幕 幻灯片 背景      更新时间：2023-09-26

当你在移动设备上时，我想有一个不同的图像显示集。我使用拉斯维加斯Jquery滑块http://vegas.jaysalvat.com/

我的问题有点模糊，我能找到我需要的。我会使用窗口大小的jquery吗?或者如果……其他的……声明吗?

这是我的代码。

<script type="text/javascript">
$.vegas('slideshow', {
backgrounds:[
  { src:'img/familyoutsidehome5-dark.jpg', fade:1000 },
  { src:'img/familyoutsidehome3-dark.jpg', fade:1000 },
  { src:'img/familyoutsidehome4-dark.jpg', fade:1000 },
  { src:'img/familyoutsidehome-dark.jpg', fade:1000 }
]
});
</script>

<script type="text/javascript">
$.vegas.defaults = {
 background: {
   src:         null, // defined by Css
   align:       'center',
   valign:      'center',
   fade:        0,
   loading      true,
   load:        function(){},
   complete:    function(){}
 },
 slideshow: {
   step:        0,
   delay:       5000,
   backgrounds: [],
   preload:     false,
   walk:        function(){}
 },
 overlay: {
   src:         null, // defined by Css 
   opacity:     null  // defined by Css 
 }
 }
</script>

如果我是正确的，你想要的是网站是基于屏幕大小响应。你甚至不需要使用javascript。css media可以做到:

@media (max-width: 500px) and (max-height: 500px) {
  div.element1 {
    background-image: url('background1.png');
  }
  div.element2 {
    background-image: url('background2.png');
  }
}

你可以通过改变javascript中的类来改变背景图像。

如果你想添加过渡效果，你也可以在CSS3中添加一个过渡:

div.element {
  transition: background-image 1s ease-in-out;
}
相关文章：