geek
44 lines
1.7 KiB
JavaScript
44 lines
1.7 KiB
JavaScript
/* 全站背景图定时轮换（每 6 秒切换一张，交叉淡入淡出） */
|
|
(function () {
|
|
var bgList = [
|
|
'https://image.987119.xyz/uploads/2026/07/18c591a3f567fc7a381.webp',
|
|
'https://image.987119.xyz/uploads/2026/07/18c5917f198ecf88481.webp',
|
|
'https://image.987119.xyz/uploads/2026/07/18c5917e0bbb86bb221.webp',
|
|
'https://image.987119.xyz/uploads/2026/07/18c591618e6be61c264.webp',
|
|
'https://image.987119.xyz/uploads/2026/07/18c5916148d840e1468.webp',
|
|
'https://image.987119.xyz/uploads/2026/07/18c59161282de003513.webp'
|
|
]
|
|
var webBg = document.getElementById('web_bg')
|
|
if (!webBg || bgList.length < 2) return
|
|
|
|
// 覆盖层：用于交叉淡入，避免背景瞬间硬切
|
|
var overlay = document.createElement('div')
|
|
overlay.id = 'web_bg_overlay'
|
|
overlay.style.cssText =
|
|
'position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;' +
|
|
'background-size:cover;background-position:center;opacity:0;' +
|
|
'transition:opacity 1.5s ease;'
|
|
document.body.appendChild(overlay)
|
|
|
|
var idx = 0
|
|
var DURATION = 1500 // 淡入淡出时长(ms)，须与 CSS transition 一致
|
|
|
|
function swap() {
|
|
idx = (idx + 1) % bgList.length
|
|
var url = 'url("' + bgList[idx] + '")'
|
|
// 新图先放到覆盖层并淡入，盖住旧图
|
|
overlay.style.backgroundImage = url
|
|
void overlay.offsetWidth // 强制 reflow，确保过渡生效
|
|
overlay.style.opacity = '1'
|
|
// 过渡结束后，把底层也换成新图，再将覆盖层淡出，实现无缝循环
|
|
setTimeout(function () {
|
|
webBg.style.backgroundImage = url
|
|
webBg.style.backgroundSize = 'cover'
|
|
webBg.style.backgroundPosition = 'center'
|
|
overlay.style.opacity = '0'
|
|
}, DURATION)
|
|
}
|
|
|
|
setInterval(swap, 6000)
|
|
})()
|