CSS学习------之简单图片切换
最近一直在重温纯CSS，学习的时候真的才发现，css真的博大精深啊！
所以趁着学习的劲头，谢了个最简单的CSS图片切换！
先整理下思路：
首先我希望图片居中间，两边有个切换按钮，点击按钮的时候，可以实现图片切换！
所以，我先弄一个div盒子，让他为顶级div所有的东西都放在他里面；
所有布局如下代码：
<div id="allbg">
<div id="picbg"> <div id="pic1">
<img src="pic1" />
<a class="pre" href="#pic3"><b>Previous</b></a>
<a class="next" href="#pic2"><b>next</b></a>
</div> <div id="pic2">
<img src="data:images/pic2.jpg" />
<a class="pre" href="#pic1"><b>Previous</b></a>
<a class="next" href="#pic3"><b>next</b></a>
</div> <div id="pic3">
<img src="data:images/pic3.jpg" />
<a class="pre" href="#pic2"><b>Previous</b></a>
<a class="next" href="#pic1"><b>next</b></a>
</div> </div>
</div>
这个时候，图片应该是按着他的大小自己随着放的；
这个时候，我们用样式来控制：
我们可以先把图片，之类的东西先全部去掉；
就用第一个父div；
先写allbg的css样式，我们先给他加上背景颜色，来观察位置：
#allbg{
height:750px;
width:650px;
position:absolute;
background:red;
left:30%;
}
这个时候我们加上picbg这个div：
#allbg #picbg{
position:absolute;
text-align:center;
height:750px;
width:650px;
overflow:hidden;
background:green;
}
此时，因为宽高与上面一样，那么久会覆盖allbg这个顶级div，颜色变成了绿色，不过我么多了行center这个，是里面的元素居中；
然后我们把图片的三个div加进去，其中class pre 和 next 可以先不要
然后图片就会是在div为picbg的盒子里面，由于我们还没有设置图片等属性，所以图片就是在这个盒子里面有着它自己摆放
不过有了宽高限制，所以它也只能在这个盒子里面，由于我们加了overflow=hidden这个属性，所以超出将会被隐藏裁剪，
所以我们看到的可能是一张图片又或者是一张图片和另一张的一点，此刻，这个我们完全靠图片的大小而定；
现在我们来控制装所有图片的盒子也就是 pic1 pic2 pic3等这样的盒子：
#allbg #picbg div{
width:640px; height:750px; position:relative;
}
这个时候装图片的盒子设置好了，那么图片将多会重叠在一起，覆盖在一起，因为我们米有指定是哪个图片的盒子，而是所有的图片的盒子
所以，我们看到的将会是最后一张图片：
现在我们来把图片的属性设置一下，我们不管图片的大小怎么样了都设置为统一宽高，
这样样式就会好看很多，不过图片的质量就不是我考虑的范围了：
#allbg #picbg img{
height:600px;
width:400px;
overflow:hidden;
}
这个时候和上一步没有什么区别，唯一的区别就是，现在的图片大小一模一样了；
现在我们把两个class加进去 来控制切换，
我们先把a 和 b先隐藏掉。因为我们要用图片来代替它 所以它们就不需要出现了
#allbg a b{display:none;}
然后就是设置 两个图片的切换按钮了：
#allbg a.pre{
position:absolute;
height:40px;
width:32px;
background:url(images/previous.gif);
top:400px;
left:10px;
}
#allbg a.next{
position:absolute;
height:40px;
width:32px;
background:url(images/next.gif);
right:10px;
top:400px;
}
其中它的位置可以通过position 之后的 top right left bottom属性来控制；
然后图片的跳转就可以通过#pic[num],这样的来控制
所以整个就okay了，我们去掉背景颜色就okay了！
这个是非常简单的css制作，没有用到上次的jQuery来控制自己自动切换，其实也可在图片的右下角加上一二三四等数字，然后鼠标滑动到那个数字，就显示那个数字的图片
这里我就不讲了！
其实大家可以考虑一下，我们把最外层的allbg div盒子去掉会怎么样？
我们通过picbg来控制图片盒子位置不行么？
还有就是，如果我把b这个属性去掉又会怎么样，他是必须的么？
大家可以思考，实践一下！
最后附上整个源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
author:EthanCoco
Sina:18720989539
WeChat:dyznzyl
Email:lijianlin0204@163.com
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS实现的可向前、向后的幻灯片效果</title>
<style>
#allbg{
height:750px;
width:650px;
position:absolute; left:30%;
}
#allbg #picbg{
position:absolute;
text-align:center;
height:750px;
width:650px;
overflow:hidden; }
#allbg #picbg div{
width:640px; height:750px; position:relative;
}
#allbg #picbg img{
height:600px;
width:400px;
overflow:hidden;
}
#allbg a b{display:none;} #allbg a.pre{
position:absolute;
height:40px;
width:32px;
background:url(images/previous.gif);
top:400px;
left:10px;
}
#allbg a.next{
position:absolute;
height:40px;
width:32px;
background:url(images/next.gif);
right:10px;
top:400px;
}
</style> <head>
<body>
<div id="allbg">
<div id="picbg">
<div id="pic1">
<img src="data:images/pic1.jpg" />
<a class="pre" href="#pic3"><b>Previous</b></a>
<a class="next" href="#pic2"><b>next</b></a>
</div>
<div id="pic2">
<img src="data:images/pic2.jpg" />
<a class="pre" href="#pic1"><b>Previous</b></a>
<a class="next" href="#pic3"><b>next</b></a>
</div>
<div id="pic3">
<img src="data:images/pic3.jpg" />
<a class="pre" href="#pic2"><b>Previous</b></a>
<a class="next" href="#pic1"><b>next</b></a>
</div>
</div>
</div> </body>
</html>
http://yunpan.cn/cmfEIKfMvF9SM （提取码：eabb）
CSS学习------之简单图片切换的更多相关文章
- Android学习笔记 ImageSwitcher图片切换组件的使用
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- JavaScript_DOM学习篇_图片切换小案例
今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 : 如: var xx = document.g ...
- CSS学习笔记-边框图片等属性
1.边框图片: 1.1含义: 告诉浏览器指定一张图片作为边框 1.2格式: border-image-source:url ...
- js简单图片切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- 【Little Demo】从简单的Tab标签到Tab图片切换
Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容.目前在各大网站都有存在这种效果.例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等. 1.简单的 Tab 标签 ...
- vue学习09 图片切换
目录 vue学习09 图片切换 定义图片数组:imgList:[],列表数据使用数组保存 添加图片索引:index 绑定src属性:使用v-bind,v-bind指令可以设置元素属性,比如src 图片 ...
- JavaScript 最简单的图片切换
使用前在文件外部要有1.jpg 2.jpg 只是简单的模仿flash图片切换,可在此基础上引申出各种不同的效果. 思路: 建立一个数组存放图片的src,然后调用setInterval周期性的调用cha ...
- html学习之路--简单图片轮播
一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...
随机推荐
- js 日期函数用法总结
1 创建Date对象,用于处理日期和时间 var date=new Date(); Date对象会把当前日期和时间保存为初始值. 还可以设置其它参数初始化 Date对象: new Date(" ...
- Cocos2d-JS坐标系
在图形图像和游戏应用开发中坐标系是非常重要的,我们在Android和iOS等平台应用开发的时候使用的二维坐标系它的原点是在左上角的.而在Cocos2d-JS坐标系中它原点是在左下角的,而且Cocos2 ...
- <Linux系统hostname命令详解>
hostname命令的用法的小知识我们都知道hostname命令是查看主机名和修改主机名的. [root@apache ~]# hostname //查看本机的主机名apache.example.c ...
- ◆linux分区的加密与自动解密◆——Super孟再创辉煌
首先制作分区的加密挂载: 分区的自动解密:
- WCF 服务的ABC之契约（七）
契约 Contract WCF的所有服务都会公开为契约(Contract),契约与平台无关,是描述服务功能的标注方式. 服务契约(Service Contract) 服务契约描述的是一个服务,它定义了 ...
- 方法的可变长参数 传入参数个数不确定可用（Type ... values）
/** * 可变长的参数. * 有时候,我们传入到方法的参数的个数是不固定的,为了解决这个问题,我们一般采用下面的方法: * 1． 重载,多重载几个方法,尽可能的满足参数的个数.显然这不是什么好办法. ...
- Laravel 5 基础（四）- Blade 简介
在多个页面中我们可能包含相同的内容,像是文件头,链接的css或者js等.我们可以利用布局文件完成这个功能. 让我们新建一个布局文件,例如 views/layout.blade.php <!doc ...
- AIX性能监控topas命令的详细解析
执行topas命令后如图所示: #topas 区域1:反映CPU使用率和工作状况 Kernel:操作系统的内核占用的CPU时间比率. 操作系统作为基础软件,为应用程序支持和服务的同时,本身的运行也需 ...
- C# 发邮件类可发送附件
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Ne ...
- SQL Server 数据库身份认证以及包含数据库
首先分为SQL Server 认证与Windows 身份认证. SQL Server 认证可以运行以下语句来查询 select * from sys.sql_logins 管理员可以直接修改密码,但无 ...