为网页添加动态背景 (背景轮播)

  • 内容
  • 相关
具体代码如下

CSS 样式

JS 代码

HTML 就一个div#bg简单实用

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<style>
div#bg {
  position: fixed
  ;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -10;
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  zoom: 1;

  opacity:1;
  transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
}
</style>
<h1><a href="http://gouji.org/?post=317">代码出处</a></h1>
<div id="bg"></div>
<script>
// 定义图片路径 {num} 为 可变的图片序号
var bgImgUrl = 'http://gouji.org/img/bg/{num}.jpg', bgNum,
    bgImgArr = [],
    bgDiv = document.getElementById("bg");
// 组合数组 此处 200 为 图开始序号 结束 210
for (var i=200; i <= 210; i++){
  bgImgArr.push(bgImgUrl.replace('{num}', i));
}
setBGimg();
function setBGimg(d){
  if(!bgNum || bgNum > bgImgArr.length) bgNum = 0;
  bgDiv.style.opacity = .001;
  setTimeout(function(){
    bgDiv.style.backgroundImage = 'url('+ bgImgArr[bgNum] +')';
    bgDiv.style.opacity = 1;
  }, 1000);
  bgNum++;
  if(typeof d == 'undefined') 
    setInterval(function(){setBGimg(true);}, 6000);
    // 上一行的 6000 是背景图片自动切换时间(单位 毫秒)
}
</script>
本文转载自:爱思路

本文标签:

版权声明:若无特殊注明,本文皆为《Finally》原创,转载请保留文章出处。

本文链接:为网页添加动态背景 (背景轮播) - https://pjax.cn/bglb.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知

评论

1条评论
  1. avatar

    思源 Lv.3 Android Webkit 4.0 Android Webkit 4.0 Android 4.4.2 Android 4.4.2 回复

    不错呀

    河北省保定市 电信

    00:00 / 00:00
    顺序播放