Hoy, un amigo me preguntó en Weibo si puedo usar JS y CSS para que la página actualice al azar una imagen de fondo cada vez que la actualizo. Puedes hacer esto específicamente:
1. Use JS para definir una matriz de imágenes, que almacena las imágenes que desea mostrar al azar
La copia del código es la siguiente:
var imGarr = ["http://www.google.com.hk/intl/zh-cn/images/logo_cn.png",
"http://www.baidu.com/img/baidu_sylogo1.gif",
"http://www.open-open.com/news/uploadimg/20120111/20120111081906_79.jpg",
"http://www.open-open.com/news/uploadimg/20120111/20120111081906_76.jpg"
];
Encontré 4 fotos aquí y eché un vistazo.
2. Use JS para generar un número aleatorio, por supuesto, este número aleatorio comienza desde 0 y termina desde imgarr.length-1.
La copia del código es la siguiente:
Var index = parseInt (math.random ()*(imgarr.length-1));
De esta manera obtenemos la imagen generada al azar.
La copia del código es la siguiente:
var currentImage = imGarr [index];
3. Dado que una imagen de fondo se generó aleatoriamente, use JS para usar esta imagen como imagen de fondo.
La copia del código es la siguiente:
document.getElementById ("BackgroundAea"). style.backgroundimage = "url ("+currentImage+")";
Dado que esta es una demostración, definí un DIV con la identificación de Backgroundarea en la página, y también establecí un fondo aleatorio para este div.
La copia del código es la siguiente:
<div id = "backgroundarea">
</div>