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

简爱代码>JavaScript2015-6-10 22:042297933

以前文章 最近发现一个插件所以重新更新下本文

插件名称: jquery.backstretch.js

下面是 示例代码:

设置网页背景

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全屏背景</title>
	<script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$.backstretch('http://api.asilu.com/cdn/img/bg/444.jpg');
</script>
</body>
</html>



多张张图片切换

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全屏背景切换</title>
	<script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$.backstretch([
		'http://api.asilu.com/cdn/img/bg/444.jpg',
		'http://api.asilu.com/cdn/img/bg/445.jpg',
		'http://api.asilu.com/cdn/img/bg/446.jpg',
		'http://api.asilu.com/cdn/img/bg/447.jpg',
		'http://api.asilu.com/cdn/img/bg/448.jpg'
	], {
		fade : 1000, // 动画时长
		duration : 2000 // 切换延时
});
</script>
</body>
</html>


2014-11-14 写的原文

看到别人的网站都有背景 自己也高了一下,但是苦于没有适合的 背景图片,所以就没有添加

现在拿出来共享一下

该代码实现了, 背景图片的切换,带有切换效果的
第一个版本 切换效果用到了 jQuery 的动画,这个版本果断放弃 不需要 jQuery切换动画由CSS设置

具体代码如下
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://api.asilu.com/cdn/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] +')';
		bgNum++;
		bgDiv.style.opacity = 1;
	}, 1000);
	if(typeof d == 'undefined')
	setInterval(function(){setBGimg(true);}, 6000);
	// 上一行的 6000 是背景图片自动切换时间(单位 毫秒)
}
</script>


代码转载注明出处 (全靠素质)

本文出自简爱博客,转载时请注明出处及相应链接。

评论

  1. dark2016-10-15 11:14回复

    不错,有地址吗?

  2. s-even2016-10-02 13:27回复

    求jq插件。

  3. jxpzm2016-05-13 19:00回复

    <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>

    上面这代码就是两个JS文件吧?

  4. jxpzm2016-05-11 19:25回复

    我用了第二个多图实例,把JS下载到本地加载后。图片不显示了。

    1. 简爱2016-05-12 09:24回复

      @jxpzm:刚才设置了下, 完全没问题

  5. keepsjh2016-04-27 23:51回复

    请问JS中图片循环轮播该怎么写呢

  6. slatch2016-02-02 22:27回复

    确实轻巧好用,必须赞一个

  7. 2015-08-22 02:05回复

    搞个插件呗

    1. 简爱2015-08-22 19:54回复

      @林:什么需求?

  8. 师贞盈2015-08-09 18:24回复

    是不是还需要什么文件啊  我吧api改了不能显示图片啊

    1. 简简单单2015-08-09 20:22回复

      @师贞盈:前面的代码需要 jquery.backstretch.js 只有最后一处是原生 JS 实现的

      1. 师贞盈2015-08-09 23:26回复

        @简简单单:请邀请我进群 QQ 1312384811 谢谢

  9. Mrxn2015-07-20 22:23回复

    不错 收藏了 加地址!

  10. miss营销故事2015-06-19 20:50回复

    这个代码好啊,就是图片太大了,加速度慢a

发表评论

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