背景图片轮播
背景图片轮播
由于<img>标签不能实现固定高度的宽度不失真拉伸，采用CSS3background属性去实现! 如果是使用<img>的话，使用bootstrap的轮播器器！
1、全屏背景切换
<!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>实现炫酷的页面整个背景覆盖切换
自定义背景图片切换
html只有一个div
css样式
JS
显示效果不如fade淡入淡出，肯定在transition的样式没有设置好！
其他示例
参考
Last updated