图片轮播总结

this指向会变化的情况

1. setInterval、setTimeout,这两个事件中的函数，this指向的是window，如何解决?将this保存在另外一个变量中。

var _this = this
setInterval(function(){
    _this.fn();
},1000);

2.html元素的事件中，解决办法同上

var _this = this;
var div = document.getElementById('div');
div.onclick = function(){
    _this.fn();
}

移动端获取屏幕的宽度、高度

element.getBoundingClientRect().width
window.screen.height

移动端事件

1. touchstart、touchmove、touchend
2. jquery会对event对象进行包装，要获取源事件对象，用event.originalEvent();
3. event.touches对象是一个数组，多点触摸会有多个touch对象
4. 若要实现touchmove会连续触发，需要在此事件中添加event.preventDefault();阻止默认行为,若影响到其他的事件逻辑，则加以判断，满足一定条件才阻止默认行为，例如此例图片轮播左右滑动时，判断满足横向滑动时才阻止默认行为，上下滑动时不阻止，以确保可以上下滑动

其他JS知识点

1. +new Date()，相当与 (new Date).getTime(); 获取自1970年1月1日至今的毫秒数
2. childNodes(不用记) : 获取元素的所有子节点。 标准属性
   在标准浏览器下会获取空白文本节点（换行符）。
   children : 获取元素的所有子节点。 非标准属性
3. handleEvent() 把任意对象注册为事件处理程序
   var tobj = {
   handleEvent: function(e) {
   alert(‘hello’);
   }
   };
   document.body.addEventListener(‘click’,tobj,false);`

HTML5、CSS3

1. 移动：-webkit-transition-duration:100ms ;-webkit-transform:translate(x,y) translateZ() //translateZ()为视角转换
2. 使div中的文字居中显示：给div一个高度,div的样式为 :height:100px;line-height:50px;text-align:center;
3. absolute绝对定位无法撑开父容器
4. 制造小圆点的css代码
   position: relative;
display: inline;
width: 8px;
height: 8px;
border-radius: 4px;
margin: 0 3px;
color: #B0B0B0;
font: 12px/15px "\5B8B\4F53";
text-decoration: none;
text-align: center;
outline: 0;
float: left;
background: #D9D9D9;
5. 碰到过一个问题：轮播图片设置为向左浮动，relative相对定位，用left来控制显示位置。可以撑开父容器,但是显示方式并不是希望的只显示一张图片，其他图片在屏幕外不显示，而是图片都显示了出来，原因是父容器的宽度设置不对。要实现希望的效果，需要将父容器的宽度设置为所有图片的位置距离想加才可以。此处这个宽度就是所有图片的宽度