Saya memiliki halaman web dan saya ingin mengubah latar belakang ke yang berbeda setiap hari. Saya memiliki total 4 gambar jadi saya ingin menggilirnya. Bagaimana saya bisa melakukannya?

Sunting: Menurut komentar, sepertinya saya tidak bisa melakukan ini dengan HTML dan CSS saja jadi saya harus menggunakan bahasa lain. Bagaimana saya bisa melakukannya?

Berikut kode CSS dan HTML saya masing-masing:

.main-section .main-division {
  background: url(../images/background-1.jpg) no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: grid;
  height:auto;
  max-width: 100%;
}
<!DOCTYPE html>
<html lang="zxx">

<head>
  <title>Test</title>
    <meta name="robots" content="noindex">
    <meta charset="UTF-8" />
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

<body>
    <section class="main-section">
        <div class="main-division">
            <div class="wrapper">
                <div class="main-cover" >
                 CONTENT
                </div>
            </div>
        </div>
    </section>
</body>

</html>

Bantuan Anda akan dihargai.

Terima kasih sebelumnya!

0
Darknicks 20 September 2021, 22:05

4 jawaban

Jawaban Terbaik

Saya dapat membuatnya bekerja menggunakan kombinasi respons dari @Rana dan @Twisty

Berikut kode yang dihasilkan:

//Code on change-background.js

$(function() {
  var backgrounds = [
    "../images/background-1.jpg",
    "../images/background-2.jpg",
    "../images/background-3.jpg",
    "../images/background-4.jpg"
  ];

  var dt = new Date();
  var index = dt.getDay() % 4;

  document.querySelector('.main-division').style.backgroundImage = "url(" + backgrounds[index] + ")";
});
.main-section .main-division {
  background: url(../images/background-1.jpg) no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: grid;
  height:auto;
  max-width: 100%;
}
<!DOCTYPE html>
<html lang="zxx">

<head>
  <title>Test</title>
    <meta name="robots" content="noindex">
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <section class="main-section">
        <div class="main-division">
            <div class="wrapper">
                <div class="main-cover" >
                 CONTENT
                </div>
            </div>
        </div>
    </section>
    <script src="js/change-background.js"></script>
</body>

</html>
0
Darknicks 22 September 2021, 06:03

Anda dapat melakukannya dengan sedikit Javascript. Cuplikan berikut akan menampilkan warna yang berbeda setiap hari dalam seminggu:

let element = document.querySelector('.change-my-colour');
/* .change this to .main-division in your code ^^^ */
let date = new Date();

switch(date.getDay()) { /* use date.getDate() instead for days of the month */
  case 0: /* Sunday */
    element.style.background = "red";
    break;
  case 1: /* Monday */
    element.style.background = "orange";
    break;
  case 2: /* Tuesday */
    element.style.background = "yellow";
    break;
  /* etc... */
  default:
    break;
}
.change-my-colour {
  width: 100vw;
  height: 100vh;
  background: blue; /* default value */
}
<div class="change-my-colour"></div>

Ubah warna di atas menjadi gambar yang ingin Anda tampilkan setiap hari (menggunakan formulir yang sama seperti di css Anda tetapi dibungkus dengan tanda kutip).

Juga jika Anda tidak terbiasa dengan Javascript, cara termudah untuk memasukkannya ke situs web Anda adalah menggunakan skrip< /a> tanda.

2
Bdeering 20 September 2021, 21:12

Perhatikan contoh berikut.

$(function() {
  var backgrounds = [
    "../images/background-1.jpg",
    "../images/background-2.jpg",
    "../images/background-3.jpg",
    "../images/background-4.jpg"
  ];

  var dt = new Date();
  var index = dt.getDay() % 4;

  $(".main-section .main-division").css("background-image", "url(" + backgrounds[index] + ")");
});
.main-section .main-division {
  background: url(../images/background-1.jpg) no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: grid;
  height: auto;
  max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main-section">
  <div class="main-division">
    <div class="wrapper">
      <div class="main-cover">
        CONTENT
      </div>
    </div>
  </div>
</section>

Menggunakan array, Anda dapat menyimpan (atau mengumpulkan) jalur gambar. Anda dapat memilih Indeks berdasarkan Hari dalam Seminggu (0 - 6) dan menggunakan operator Modulus untuk membantu memastikan index selalu benar atau dalam cakupan.

2
Twisty 21 September 2021, 14:14

Gunakan setInterval(backgroundChange, 86400000); dengan cara ini fungsi backgroundChange akan berjalan dalam interval setiap 24 jam(=86400000ms).
Anda kemudian dapat mendefinisikan fungsi backgroundChange() yang mengubah background .

Anda dapat mencoba pendekatan yang berbeda dengan menggunakan hari minggu atau tanggal bulan sebagai nilai input
Anda dapat menggunakan loop if elseIf seperti pada cuplikan di bawah ini:

backgroundImages = ['urlImage1', 'urlImage2', 'urlImage3', 'urlImage4'];

var date = new Date();
var dayOfWeek = date.getDay();

if (dayOfWeek == "0") {
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
} else if (dayOfWeek == "1") {
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
} else if (dayOfWeek == "2") {
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
} else if (dayOfWeek == "3") {
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek] + ")";
} else if (dayOfWeek == "4") {
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
} else if (dayOfWeek == "5") {
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
} else if (dayOfWeek == "6") {
  document.querySelector('.main-division').style.backgroundImage = "url(" + backgroundImages[dayOfWeek - 4] + ")";
} else {
  document.querySelector('.main-division').style.backgroundImage = "url(somebackup-image)";
}
.main-section .main-division {
  background: no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  align-items: center;
  display: grid;
  height: auto;
  max-width: 100%;
}
<!DOCTYPE html>
<html lang="zxx">

<head>
  <title>Test</title>
  <meta name="robots" content="noindex">
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

<body>
  <section class="main-section">
    <div class="main-division">
      <div class="wrapper">
        <div class="main-cover">
          CONTENT
        </div>
      </div>
    </div>
  </section>
  <script src="If_JS_is_present_in_file_use_src_else_simply_write_inside_this_tag"></script>
</body>

</html>
0
Rana 20 September 2021, 22:22