Tengo una página web y me gustaría cambiar el fondo a uno diferente cada día. Tengo 4 imágenes en total, así que me gustaría recorrerlas. ¿Cómo puedo hacer eso?
Editar: según los comentarios, parece que no puedo hacer esto solo con HTML y CSS, así que tendría que usar otro idioma. ¿Cómo puedo hacer eso?
Aquí está el código de mi CSS y HTML respectivamente:
.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>Su ayuda será apreciada.
¡Gracias por adelantado!
Puedes lograr esto con un poco de Javascript. El siguiente fragmento mostrará un color diferente cada día de la semana:
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>Cambie los colores de arriba a las imágenes que le gustaría mostrar cada día (usando el mismo formulario que en su css pero entre comillas).
Además, si no está familiarizado con Javascript, la forma más sencilla de incluirlo en su sitio web es mediante una etiqueta de secuencia de comandos .
Considere el siguiente ejemplo.
$(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> Usando una matriz, puede almacenar (o recopilar) las rutas de la imagen. Puede elegir un índice según el día de la semana (0 - 6) y usar el operador de módulo para asegurarse de que el index siempre sea correcto o esté dentro del alcance.
Use
setInterval(backgroundChange, 86400000);de esta manera, la funciónbackgroundChangese ejecutará en un intervalo de cada 24 horas (= 86400000 ms).
Luego puede definir una funciónbackgroundChange()que cambia el fondo.
Puede probar un enfoque diferente utilizando los días de la semana o la fecha del mes como valor de entrada
Puede usar if elseIf bucles como en el siguiente fragmento:
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>