移动端适配----jd练习（上）

 效果图==>

顶部搜索框 

图标都是利用背景插入url一般情况下为：{

background:url()

background-size:

background-position:

width:

height:

}

去除输入框的线条：{

outline: none;

border: none;

}

轮播图（图片）也还行

html

对于轮播图的n张图片：

在html中应写出n+2个div。考虑到第一张之前是最后一张，顺序就应该是：

第n张 第一张 第二张 第三张........第n张 第一张

<----------------------------------------------------------------------------------------------------------------------------->

style

结束后利用浮动调整图片

利用子绝父相给轮播图设置相对定位（圆点为子元素设置绝对定位）

对于宽度的设置

因为十张照片，每一张都应该是百分之百，十张的话就应该在照片的父级div设置1000%。要是100%的话每一张都是10%太小了。

而li没有显示大小十个直接让每一个是10%就可以了。

轮播图（小圆点）还好啊

！ 先用list-style把那点整没他

1.将第一个小圆点背景默认设为被选中的样式颜色

2.子绝父相给小圆点设置绝对定位

3.利用bottom调整小圆点在图片中的位置

left:50%自动居中了就。十分滴好用啊十分滴好用（👍👍👍）

4.想让小圆点都水平还是需要将li进行左浮动

在进一步调整小圆点的样式（border-radius）

轮播图（可滑动传送带） cs sr

此处需要用js来实现了。小程牢湿十分的难受啊。这时候好奇的同学要问了。没错？就是先弄个入口函数，我也不会jq的，那的还没咋看呢真服了就无脑

window.οnlοad=function（）{

                banner()

}就很爽啊学jq干什么？

1.直接建立函数banner（为啥用横幅这个单词我也不理解，不理解的看着就diao）把他直接放入口函数会方便点。

2.在获取视图宽度时用到了offsetWidth 而不是width。

3.提前在js中获取好传送带 小圆点及其索引值。然后设置三个手指事件。

4.手指事件。固定就是：

先定义好中间值startX 

ul.addEvenListener("touchstart / touchmove / touchend",function(e){

                start X = e.touches[0].clientX

}

理解一下理解一下，举个栗子。

当我使用以上代码时，对于touchstart 和 touchmove 其中所包含的e.touches[0].clientX。

在div中随机点击一个点并移动一小小下鼠标就会获得一个移动之后的数值。如下图所示，

可以得出在 touchstart 中的e.touches[0].clientX表示的就是单击页面时的手指位置啊，（可能正常人一看就懂但是我不zc笨死得了）。

而对于 touchmove 中的 e.touches[0].clientX 表示的则是当鼠标移动完成后最后停止的手指位置。

定义的moveX通过两者相减表示出移动的距离。最后和index值一起运算通过ul.style.transform的translateX表示出移动的效果。（这样就可以实现移动了）

5.用户误点则是实现移动够某一个设定距离图片才会变换。利用if语句设置条件就可以了

说下思路就是if（移动的绝对值超过了我们所规定的最大值）{

再继续判断是左移还是右移，从而用索引值实现移动方向。再加上变化效果也就是变化的过渡transition和移动的transform

}else{

没有超过就是误点，也不需要改变索引值，直接代最开始的index加上过渡和移动

}

6.由于一直换下去会出现空白，所以需要通过设置特定条件灵活改变index的值。

利用transitionend来在过渡事件完成之后实现对index的改变。

注意的细节是将transition的”“变成空白就无需看到过渡的过程直接看到效果。

轮播图（可滑动小圆点）

对于小圆点的改变利用for循环。

通过改变标签的class来实现样式的改变

先定义一个空白的，又因为数组的长度和索引相差一位，所以要加的那个li应该将index-1。从而改变标签样式。

自动轮播

利用计数器使index++

（不要忘记把transition和transform效果加上）

1.分别在最开始和鼠标离开的时候添加计时器

2.在滑动和点击时清除定时器

关键知识点

1.back-ground的四个属性

（1）length 两个值分别是宽度和高度。如果只有一个值，第二个为auto

（2）persentage 计算背景定位区域的百分比，两个值同样是宽高，一个自动

（3）cover 保持图像纵横比并将图像缩放成完全覆盖背景定位区域的最小大小

（4）contain 保持图像纵横比并将图像缩放成适合背景定位区域的最大大小

也就是说cover 和 contain 的区别在于使用contain后只要xy轴有一个适应另一个就不变

2.width 和 offsetWidth 的区别两大点

（1）width获取的是行内的style。而offset Width还可以获取样式表中的style

（2）style.width获取的仅仅是div的宽度并且有单位px

而offsetWidth 获取的是border + padding + width。返回值为一个数值不带单位

3.e.preventDefault()的含义

阻止默认操作？

先理解一下什么是默认操作：

a标签就是一个默认操作，当点击时会跳转到另一个页面。（或者是提交表单）

e.preventDefault()就会阻止这种行为的发生，但是我不知到在这段代码里有什么用

那你点击图片他是被a标签包裹的，点了就跳转了啊。不点的话无法获取手指位置也没办法移动了。

4.transitionend 的含义

transitionend 会在css过渡事件结束的时候触发。

对于本练习中相当于最后一张回到第一张，第一张到最后一张。再加上transition的”“空白使过渡不被显示，直接达到过渡后的效果

5.classname 的效果

可以改变标签的class。举个栗子

可以发现在button有一个事件是check（）函数

而此函数实现的是将uul.className = ”uhh2“ 

点击后发现ul的class变成了uhh2。

由此可以发现className是改变标签元素，从而改变标签样式。 

注意!!!

1.这个back-ground真是让我红温了啊！！！！

当back-ground出现在background:url 的下面时就会失效 ! ! ! 逆天了

2.不要忘记JS中像li这样的要用的时候要加All oooooooo.