前端笔记一——图片切换效果

一、说明

图片切换效果是web前端里面一个必不可少的特效，在许多的网页中都会有使用。
其主要的实现原理就是利用display属性中的block和none的切换，在设置时将不需要的滑块设置为display:none将其隐藏，在设置切换按钮之后，能够将需要显示的滑块设置为display:block。
然而要实现其中的功能，就需要的js中的代码来实现,，其主要代码如下：

var slides=document.getElementsByClassName("Scroll");//获得滑动块
slides[index-1].style.display="block";

二、具体实现

本次的实现具体分为三个步骤：

1. 设置活动块的结构，html结构框架；
2. 设置样式，确保布局；
3. javascript的dom来操作滑块样式。

1、html基本框架

首先要实现滑块的切换，就必须要有滑块的存在，那么当我们有了滑块之后，我们还需要做些什么呢？没错，我们还需要一个容器来装我们的不同内容的滑块，在考虑到目前的情况下时，我们可以得出我们需要的html基本框架。

<div id="Con">
    <div class="Scroll">
    <!--此处写滑块的内容-->
    </div>
</div>

这里解释下id与class的区别，id和class都是选择器，id选择器是独一无二的，也就是一个html代码里面id选择器的名字不可以重复，十分具有标志性的代表一个区域或段落，而class恰恰相反，当有些需要反复使用的共有特征时，就需要使用到class选择器。在上述的代码中，Con只能有一个，而滑块需要的数量相对可以变化，使用class选择器，可以方便的为多个滑块都设置上样式。详情请查看W3C官网
设置完两层框架之后，我们就有了一个整体的结构了，知道什么地方做什么，思路也相对清晰。现在我们要做的就是在之前的框架上利用绝对布局position:absolute来将上一页和下一页添加在图片的两侧

<a class="btn-left">上一页</a>
<a class="btn-right">下一页</a>

此处的重点是将两个a标签的内容放到合适的位置，因此这里使用我们的CSS样式来实现

display: block;
background-image: url(img/dirL1.png);
width: 39px;
height: 72px;
position: absolute;
left: 5px;
top: 250px;

这里解释下此段CSS，display:block将原本为行内元素改变为块级元素，方便后面的布局，后三句代码，就是要求块级元素在决对定位下进行要求下的定位。
此处注意左右翻页不在滑动块中，而是在容器container下面，因此可以保持两个模块一个在页面，不会随滑块变化而变化。

2、样式与布局</