Question

是否可以在主页上为每日设置不同的背景图片？就像今天将是第一张图片，明天将是第二张图片，明天将是第三张图片。我一直在研究护目镜，但在多背景循环或CSS循环中找不到。

.bgImage {
background: url('../img/HighCityA.jpg') 20% 20% / cover transparent;    --Today
/*  background: url('../img/HighCityB.jpg') 20% 20% / cover transparent;*/ --Tomorrow
/*  background: url('../img/HighCityC.jpg') 20% 20% / cover transparent;*/  --Tuesday
/*  background: url('../img/HighCityD.jpg') 20% 20% / cover transparent;*/  --Wed
  width: 100%;
  height: 800px;
  margin-top: -87px;
  position: absolute;
  top: 19%;
  left: 0px;
  z-index: -1
}

有什么建议吗？

Answer 1

您需要遍历样式表规则，找到.bgImage的规则并根据当天更改其background属性。

.getDay()会返回0（Sunday）到6（Saturday）的数字。

var day = new Date().getDay();
var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bgImage") {
      r.style.backgroundPosition = '20% 20%';
      r.style.backgroundSize = 'cover';
      r.style.backgroundColor = 'transparent';
      // Sunday
      if (day == 0) {
        r.style.backgroundImage = 'url(../img/HighCityA.jpg)';
      }
      // Monday
      else if (day == 1) {
        r.style.backgroundImage = 'url(../img/HighCityB.jpg)';
      }
      // Tuesday
      else if (day == 2) {
        r.style.backgroundImage = 'url(../img/HighCityC.jpg)';
      }
      // Wednesday
      else if (day == 3) {
        r.style.backgroundImage = 'url(../img/HighCityD.jpg)';
      }
    }
  }
}

您可以将此代码简化为：

var day = new Date().getDay();
var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bgImage") {
      r.style.backgroundPosition = '20% 20%';
      r.style.backgroundSize = 'cover';
      r.style.backgroundColor = 'transparent';
      r.style.backgroundImage = day == 0 ? 'url(../img/HighCityA.jpg)' : day == 1 ? 'url(../img/HighCityB.jpg)' : day == 2 ? 'url(../img/HighCityC.jpg)' : day == 3 ? 'url(../img/HighCityD.jpg)' : ''
    }
  }
}

工作示例

为了快速演示，我使用了backgroundColor代替backgroundImage。

var day = new Date().getDay();
var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bgImage") {
      r.style.backgroundPosition = '20% 20%';
      r.style.backgroundSize = 'cover';
      //.style.backgroundColor = 'transparent';
      r.style.backgroundColor = day == 0 ? 'black' : day == 1 ? 'red' : day == 2 ? 'blue' : day == 3 ? 'green' : ''
    }
  }
}

.bgImage {
  width: 100%;
  height: 800px;
  margin-top: -87px;
  position: absolute;
  top: 19%;
  left: 0px;
  z-index: -1
}

<div class="bgImage"></div>

Answer 2

您可以使用Javascript执行此操作。例如，您可以使用以下JavaScript代码获取当天：

var today = new Date();
var dd = today.getDate();

根据月份的日期，您可以相应地设置背景图像。例如，你可以这样做：

var str1 = "url('http://www.yoururl.com/pathToImages/backgroundN.jpeg')";
document.getElementById("IdOfDivYouWantToStyle").style.backgroundImage = str1 ;

然后，您可以根据每月的日期动态设置“backgroundN.jpeg”。您甚至可以保持源代码不变，只需更改文件夹中的图片即可。

Answer 3

您可以尝试像这样的jquery / javascript;

var date = new Date();
var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var weekday = weekdays[date.getDay()];
if(weekday=='Monday'){
$('.bgImg').css('background-image', 'url(' + monday_imageUrl + ')');
}else if(weekday=='Tuesday'){
$('.bgImg').css('background-image', 'url(' + tuesday_imageUrl + ')');
}

...

Answer 4

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(window).load(function() {          
  var i =0;
  var images = ['image2.png','image3.png','image1.png'];
  var image = $('#slideit');
                //Initial Background image setup
  image.css('background-image', 'url(image1.png)');
                //Change image at regular intervals
  setInterval(function(){  
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);           
 });
</script>
</head>
<body>
      <div id="slideit" style="width:700px;height:391px;"> 
      </div>
</body>
</html>

试试这个。我相信这会奏效。这例如是用于每5秒后改变图像。尝试按你的意愿设置它！

Answer 5

var day = new Date().getDay();
var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bgImage") {
      r.style.backgroundPosition = '20% 20%';
      r.style.backgroundSize = 'cover';
      //.style.backgroundColor = 'transparent';
      r.style.backgroundColor = day == 0 ? 'black' : day == 1 ? 'red' : day == 2 ? 'blue' : day == 3 ? 'green' : ''
    }
  }
}

.bgImage {
  width: 100%;
  height: 800px;
  margin-top: -87px;
  position: absolute;
  top: 19%;
  left: 0px;
  z-index: -1
}

<div class="bgImage"></div>

多背景主页

5 个答案:

工作示例