JQuery相册切换项目
2019-04-04 本文已影响0人
江边有颗桃
我需要注意什么：
1.如何创造小圆点：<span> 设置 display:block属性后设置宽和高，因为只有块级元素才可以设置宽和高。
2.display:flex 弹性布局，为布局提供最大的灵活性，设为flex布局以后，子元素的float\cear\vertical属性会消失
justify-content:space-betwwen 使内容在株洲上左右两端上下两端开始排列，这两个属性配合使用可以让元素在容器中巨晕分布，常用于移动端
3.vw 相对单位，1
vw 等于可视窗口宽度的1%
4.：before 微元素 表示在元素之前添加内容，默认是行内元素，同时要使用content属性来制定要插入的内容。
5.为什么这里是相对定位 ，注意相对定位的特性，保留原本一亩三分地 因为我们的nav是靠我们的内容撑开的，如果换成了绝对定位就没办法撑开，会塌陷，用相对定位就不会*/
5.水平垂直居中的两种办法：
第一种
图片.png
图片.png
第二种：
图片.png
图片.png
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全屏幕的云南旅游相册</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<span></span>
<nav>
<a href="#">泸沽湖</a>
<a href="#">丽江古城</a>
<a href="#">茶马古道</a>
<a href="#">就这家·云逸客栈</a>
<a href="#">西双版纳</a>
<a href="#">云南红酒庄</a>
<a href="#">轿子雪山</a>
<a href="#">普者黑</a>
<a href="#">海埂大坝</a>
<a href="#">玉龙湾</a>
<a href="#">昆明郊野公园</a>
<a href="#">欧洲风琴小镇</a>
</nav>
<div>
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">
<img src="images/10.jpg">
<img src="images/11.jpg">
<img src="images/12.jpg">
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
border: none;
}
html,
body{
overflow: hidden;
height: 100%;
background: #93B3C6;
}
span{
display: block;/*span 是行内元素，要想设置宽和高，就得设置为display:block*/
width: 16px;
height: 16px;
margin: 30px auto 40px/*左右自动居中*/
border-radius:50% ;/*圆形*/
background: #FFFFFF;
}
nav{
display: flex;/*display:flxe;弹性布局 ，为布局提供最大的灵活性，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效*/
width: 78.125vw;/*vw:相对单位，1vw等于可视窗口宽度的1%*/
margin: 0 auto 45px;
justify-content: space-between;/*justify-content:sapce-between;使容器内项目在主轴上左右两端或上下两端开始排列
这两个属性配合使用可以让元素在容器中均匀分布。常用于移动端开发*/
}/*因为这里的小圆点已经设置了，所以不需要设置margin高了 左右居中对齐*/
nav:before{
position: absolute;/*注意这里要是相对行为*/
top: 20px;
width: 100%;
height: 10px;
background: #FFFFFF;
display: block;
content: '';
}
nav>a{
position:relative ;/*为什么这里是相对定位 ，注意相对定位的特性，保留原本一亩三分地 因为我们的nav是靠我们的内容撑开的，如果换成了绝对定位就没办法撑开，会塌陷，用相对定位就不会*/
font-size: 20px;
padding: 10px;
border: 2px solid #5395B4;
color: #255D7E;
text-decoration: none;
background: #FFFFFF;
}/*设置完这个之后，我们要考虑的是如何设置框框下面的线。 设置重叠 绝对定位 */
div { position: relative;
overflow: hidden;/*图片太大，设置不要隐藏*/
width: 78.125vw;
height: 75vh;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3);
}
div>img{
width: 98%;
height: 96%;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;/*设置到这里会发现还存在一个滚动条，这是为什么呢出现滚动条的原因是因为整体显示的内容的高度，超过了屏幕的高度，所以使用overflow：hidden；来把超出的内容隐藏掉，只显示一屏的内容就可以了*/
}
// 点击图片触发事件
$(document).ready(function(){
$('a').click(function(){
$('img')
.eq($(this).index())
.css({'opacity':'1'})
.sibings()
.css({'opacity':'0'});
});
});
