MVC5+HTML5 背景轮播图

参考文章：https://www.gouji.org/?post=317

使用css+js实现背景图片轮播

废话不多说，代码：

<style>th {text-align: center;}#bd_main {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;/*background-image: url(../../Content/images/LoginBackground1.JPG) no-repeat center #eee;background-attachment: fixed;background-size: 100% 100%;width: 100%;height: auto;height: 620px;margin: auto;*/}#loginDialog1 {text-align: center;width: 600px;height: 250px;margin: 0 auto;}
</style><div id="bd_main"><div id="loginDialog1" style="background-color:brown"></div>
</div>
<script>var bgImgUrl = 'http://api.asilu.com/cdn/img/bg/{num}.jpg', bgNum,bgImgArr = [],bgDiv = document.getElementById("bd_main");// 组合数组 此处 200 为 图开始序号 结束 210for (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>

此代码有点小瑕疵，父div里设置了背景，当其进行轮播虚化的时候，子div里的内容也会跟着虚化，达不到预期的效果。

解决方法：

子div写在外面，用margin移动到想要的位置，把父div脱离文档流，子div就会在父div里面，但有不是一个div。

脱离文档流是指将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

脱离文档流方法：1、float；2、absolute；3、fixed。具体操作https://blog.csdn.net/thelostlamb/article/details/79581984

修改后代码：

<style>th {text-align: center;}#bd_main {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;/*background-image: url(../../Content/images/LoginBackground1.JPG) no-repeat center #eee;background-attachment: fixed;background-size: 100% 100%;width: 100%;height: auto;height: 620px;margin: auto;*/}#loginDialog1 {text-align: center;width: 600px;height: 250px;margin: 0 auto;}
</style><div id="bd_main">
</div>
<div id="loginDialog1" style="background-color:brown">
</div><script>var bgImgUrl = 'http://api.asilu.com/cdn/img/bg/{num}.jpg', bgNum,bgImgArr = [],bgDiv = document.getElementById("bd_main");// 组合数组 此处 200 为 图开始序号 结束 210for (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>

MVC5+HTML5 背景轮播图相关推荐

【每日一练】39—七夕节背景轮播图效果的实现
作者 | 杨小爱写在前面今天是七夕节,在这里,我先祝大家七夕节快乐,有情人终成眷属.我们节也要过,学习也要继续,因此,今天我们来实现一个漂亮的七夕幻灯轮播图效果,这个效果我个人觉得非常实用,如果你 ...
HTML+JavaScript网页背景轮播图完整源码
轮播图运行效果轮播图实现完整源码 <!DOCTYPE html> <html lang="en">
HTML+CSS实现一个淡显淡隐轮播图
目录效果展示主要思路及一点说明代码: 效果展示淡显淡隐背景轮播图主要思路及一点说明这里我定义了一个动画 slowly-show 来完成主要的功能.五张图片轮播,一个周期设置为25秒,则每张 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
swiper轮播图切换指示点改变背景颜色
swiper 官方api文档:https://www.swiper.com.cn/api/index.html 如果有一个页面中需要引用多个Swiper,可以给每个容器加上ID或Class区分,但是需 ...
HTML5+CSS3实现轮播图
HTML5+CSS3来实现轮播图利用CSS3的新属性Animation,主要是利用CSS3的动画的特性,不需要任何JS技术即可实现轮播图: 下面就是我实现轮播图的步骤 (1).先用@keyframe ...
画布之轮播图片HTML5,Axure原型设计之轮播图
轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或者移动端的原型都非常有帮助.现在讲讲如何使用axure8.0制作轮播图原型~~ 步骤一:(轮播图动态面板) ...
html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...

MVC5+HTML5 背景轮播图

MVC5+HTML5 背景轮播图相关推荐

最新文章

热门文章