CSS & JS 制作滚动幻灯片
==================纯CSS方式====================
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
} .show-box {
height: 800px;
/*背景固定*/
background-attachment: fixed;
/*图像居中*/
background-position: center;
/*背景遮盖*/
background-size: cover;
}
</style>
</head> <body>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/GreaterFlamingos_ZH-CN13656214069_1920x1080.jpg);">
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/LacsdesCheserys_ZH-CN10032851647_1920x1080.jpg);">
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/MadeiraTrails_ZH-CN11087101725_1920x1080.jpg);">
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/VaranasiBoat_ZH-CN8290748524_1920x1080.jpg);">
</div>
</body> </html>
仔细看背景切换的方式，是不是类似于层叠起来的效果，这全依赖于CSS3的background-attachment: fixed;样式，它的作用是将背景图像固定在窗口中，于是背景就不会随着页面滚动啦，虽然原理很简单，但效果很漂亮呢。
唯一的不足是，每一个div的高度是固定的，对于不同的显示器呈现的效果可能会不一样，所以接下来我们使用JavaScript来对页面进行优化。
==================CSS&JS方式==================
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
} .show-box {
/*与body高度一致*/
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<script type="text/javascript">
window.onload = function() {
var body = document.getElementsByTagName("body")[0];
body.style.height = window.innerHeight + "px"; //设置body高度 var new_pos, old_pos = 0; /*页面滚动事件*/
window.onscroll = function() {
var screen = window.innerHeight; //窗口内部高度
var scroll = document.body.scrollTop; //获取页面滚动高度
if(scroll == 0) { //初始化滚动位置
old_pos = 0;
}
if((scroll % screen) + 50 > screen) { //滚动至接近位置时
new_pos = Math.ceil(scroll / screen);
if(new_pos != old_pos) {
document.body.scrollTop = new_pos * screen; //滚动到最合适的位置
}
old_pos = new_pos;
}
}
}
</script>
</head> <body>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/GreaterFlamingos_ZH-CN13656214069_1920x1080.jpg);">
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/LacsdesCheserys_ZH-CN10032851647_1920x1080.jpg);">
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/MadeiraTrails_ZH-CN11087101725_1920x1080.jpg);">
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/VaranasiBoat_ZH-CN8290748524_1920x1080.jpg);">
</div>
</body> </html>
通过JavaScript会自动调整展示区的大小，并且能在滚动的同时自动展示，由于这种体验不太好展示，这里就不截图了，运行这里的代码就能看到效果了。
这种方式还可以再继续优化，比如让JavaScript的自动滚动更加平缓，可以使用JQuery实现，这里就不继续深究了。
==================幻灯片效果==================
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
} .show-box {
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
} .show-text {
width: 50%;
height: auto;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
bottom: 0px;
} .show-text h2 {
color: white;
font-size: 18px;
} .show-text p {
color: white;
line-height: 1.5em;
font-size: 14px;
margin: 10px 0px;
} .show-text a {
color: white;
padding: 6px 12px;
border: 1px solid white;
background: none;
display: inline-block;
text-decoration: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var body = document.getElementsByTagName("body")[0];
body.style.height = window.innerHeight + "px"; var new_pos, old_pos = 0; /*页面滚动事件*/
window.onscroll = function() {
var screen = window.innerHeight;
var scroll = document.body.scrollTop;
if(scroll == 0) {
old_pos = 0;
}
if((scroll % screen) + 50 > screen) {
new_pos = Math.ceil(scroll / screen);
if(new_pos != old_pos) {
document.body.scrollTop = new_pos * screen;
}
old_pos = new_pos;
}
}
}
</script>
</head> <body>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/GreaterFlamingos_ZH-CN13656214069_1920x1080.jpg);">
<div class="show-text" style="left: 0px;">
<h2>粉红色的鸟精灵</h2>
<p>要说自然界什么动物最让人眼前一“亮”，那肯定要数大火烈鸟了。这个周身红色的大型鹳鸟，总是用一种给人感觉高傲的身姿伫立在水间，十分耀眼。这些披着红色大衣的鸟类时而在水中游泳，时而徜徉在浅滩，悠闲安详的神态给人感觉高傲而不可接近。</p>
<a href="##">大火烈鸟</a>
</div>
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/LacsdesCheserys_ZH-CN10032851647_1920x1080.jpg);">
<div class="show-text" style="right: 0px;">
<h2>欧洲屋脊下的小镇</h2>
<p>虽然雪总是会带给人寒冷的感觉，但是雪山却是让人感叹不已的美丽景观。看这纯白美丽的雪山，气势磅礴，玲珑秀丽，仿佛可以让周围的一切都染上白色的外衣。山脚下静谧的湖水也不由的被这美丽所折服，映出雪山的娇媚身姿。白与蓝的搭配，让人看了心醉。</p>
<a href="##">霞慕尼</a>
</div>
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/MadeiraTrails_ZH-CN11087101725_1920x1080.jpg);">
<div class="show-text" style="left: 0px;">
<h2>不可错过的火山岛</h2>
<p>在非洲西海岸，坐落着有着“大西洋明珠”美誉的马德拉群岛，它隶属于葡萄牙。这是一座秀丽的火山岛，可供人登陆的部分是整个火山区的四分之一。岛上覆盖着密林，有着无数僻静的山间小径，这里还有被列入联合国世界遗产的月桂树林生态系统，是个适合徒步旅行的岛屿。</p>
<a href="##">马德拉群岛</a>
</div>
</div>
<div class="show-box" style="background-image: url(http://s.cn.bing.net/az/hprichbg/rb/VaranasiBoat_ZH-CN8290748524_1920x1080.jpg);">
<div class="show-text" style="right: 0px;">
<h2>踏足古老而神秘的印度</h2>
<p>印度是个古老而神秘的国度，这里的人们尊称恒河为“圣河”和“印度的母亲”。虔诚的印度教徒一生至少必须到恒河净身一次。所以千百年来，朝圣者的足迹遍布了恒河两岸。众多神话故事和宗教传说也以这里为背景，形成了独特的风土人情。</p>
<a href="##">瓦拉纳西</a>
</div>
</div>
</body> </html>
幻灯片展示
CSS & JS 制作滚动幻灯片的更多相关文章
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- #3使用html+css+js制作网页 番外篇 制作接收php
使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...
- #3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
- #2使用html+css+js制作网站教程 测试
#2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...
- #1使用html+css+js制作网站教程 准备
#1使用html+css+js制作网站教程 准备 本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...
- JS连续滚动幻灯片：原理与实现
什么是连续滚动幻灯片?打开一些网站的首页,你会发现有一块这样的区域:一张图片,隔一段时间滑动切换下一张:同时,图片两端各有一个小按钮,供你手动点选下一张:底部有一排小圆圈,供你选定特定的某帧图片.这就 ...
- 利用css+js制作下拉列表
利用文本框来制作,可以不影响给后台传数据.<!DOCTYPE html> <html> <head> <style> *{;;;} body{font- ...
- HTML/CSS+JS制作一个高考倒计时页面
2020-07-09更新 修复倒计时归零后出现负数的bug 自动切换至下一年日期 ##效果展示 前言 在B站上找视频学习的,勉强搞出来了,写下此篇文章作为笔记,也希望有更多感兴趣的人能够有所收获. ( ...
随机推荐
- Java正则表达式入门——转自RUNOOB.COM
Java 正则表达式 正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. Java正则表达式和Perl的是最为相似 ...
- 使用FastReport打印二维码
简单介绍一下该功能所在的项目背景:C#语言编写的WPF客户端应用程序,在“结账”模块中,打印出的收款小票上需要显示一个二维码,服务生拿着小票去找顾客,顾客可以选择现金.银行卡等普通支付方式,也可以直接 ...
- jQuery 常用速查
jQuery 速查 基础 $("css 选择器") 选择元素,创建jquery对象 $("html字符串") 创建jquery对象 $(callback) $( ...
- valueOf和toString的区别
基本上所有的JavaScript数据类型都有valueOf(),toString()方法,null除外,这两个方法解决了JavaScript值运算和显示的问题 valueOf()会把数据类型转换成原始 ...
- jetbrain系列IDE设置
1.代码提示默认ctrl+space(这是全角半角切换),改为alt+/,这与cyclic expand word冲突,直接删掉它就可以了 2.ctrl+M,进入presentation mode,与 ...
- Style样式
最重要的两个元素 :setter Trigger Style中的Setter setter是用来设置属性值的 <Style TargetType="{x:Type TextBox} ...
- Android 引导页公共方法LeaderPager
SimpAndroidFarme是近期脑子突然发热想做的android快速开发的框架,目标是模块化 常用的控件,方便新手学习和使用.也欢迎老鸟来一起充实项目:项目地址 引导页是我们开发app很常用的功 ...
- CentOS下配置java环境变量classpath
一. 需要配置的环境变量1. PATH环境变量.作用是指定命令搜索路径,在shell下面执行命令时,它会到PATH变量所指定的路径中查找看是否能找到相应的命令程序.我们需要把 jdk安装目录下的bin ...
- Django框架
一.首先,到底什么是框架? 想要回答这个问题,我们要慢慢来. ①首先从DRY原则开始说起 Don't Repeat Yourself,不要重复你的代码. DRY原则的重要性怎么提都不过分,很多人说编程 ...
- jquery-三级联动
html <!DOCTYPE html> <html> <head> <meta charset=gbk /> <title>selectL ...