轮播图的原理1.图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片添加一个父级的遮罩，每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 2.图片移动动画原理：从a位置移动到b位置，需要先计算两点之间的差值，通过差值和时间间隔，计算出每次 ...
分类：
Web程序 时间：
2018-12-05 14:25:33
阅读次数：
172
<style> * { margin: 0; padding: 0; } ul { list-style: none; } img { vertical-align: top; } /*取消图片底部3像素距离*/ .box { width: 300px; height: 200px; margin: ...
分类：
其他好文 时间：
2018-12-02 21:12:48
阅读次数：
129
Form input select textarea type=”radio/checkbox/password/button/text/submit/reset/” 表单的事件 onchange 当表单内容被修改时触发的事件 onfocus 获取焦点事件 onblur 失去焦点事件 表单里的内容用 ...
分类：
Web程序 时间：
2018-12-02 21:10:50
阅读次数：
234
移动端滑屏封装注意事项： 1.touchMove时候方向判断（可以控制在 以x轴位中心正负15度之内为横向滑屏，纵向滑屏同理） 2.上下滑屏与左右滑屏的冲突(判断用户滑动方向后，只做单方向的处理) 3.安卓触摸(例如某个人手指很粗)触发touchMove（记录上一次的手指坐标，每一次move的时候判 ...
分类：
移动开发 时间：
2018-12-02 20:05:04
阅读次数：
212
<div class="all" id='box'> <div class="screen"><!--相框--> <ul> <li><img src="imgs/1.1.jpg" width="500" height="200"/></li> <li><img src="imgs/2.2.jpg" ...
分类：
其他好文 时间：
2018-12-01 20:25:18
阅读次数：
256
原生js实现无缝轮播 因为要做到无缝，所以就要把第一张图片和最后一张连接起来，在此处采用js克隆了第一张图片的节点，添加到最后，显示图片序号的小圆按钮也是使用js动态添加的。 html部分 <div class="banner" id="banner"> <ul class="pic" id="pi ...
分类：
Web程序 时间：
2018-12-01 20:12:27
阅读次数：
188
转自： https://www.cnblogs.com/LIUYANZUO/p/5679753.html 仅用于个人收藏学习，侵删 轮播图的原理： 一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。 Html布局 首 ...
分类：
Web程序 时间：
2018-12-01 18:27:23
阅读次数：
253
轮播图设计 在轮播图中假设有N张广告图，则父div包含N+2张图，其中在最前面增加最后一张图，在最后面增加第一张图，为的是然轮播图的前后切换感觉像个循环，体验较好， 通过调整父div的left值来确定图片的位置，通过定时器来产生滑动的效果，jQuery代码如下 效果如下 完成日期 2018/11/2 ...
分类：
其他好文 时间：
2018-11-30 20:49:52
阅读次数：
276
最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以，有些底层的东西自己不懂，到头来也只是一昧的使用，一直在用别人的东西，对自己的成长帮助也不大。 万丈高楼平地起，基础打扎实了学什么都快，而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播 ...
分类：
Web程序 时间：
2018-11-29 11:12:13
阅读次数：
166
