js图片轮播案例总结

1.js里面this的指向
在函数中this指向window
在枚举对象中 this指向枚举对象
在事件中 this指向当前对象

//事件绑定
var btn = document.querySelector("button")
btn.onclick = function () {
  console.log(this) // btn
}
//事件监听
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
  console.log(this) //btn

在定时器中this指向window

var name = 'my name is window';
  var obj = {
      name: 'my name is obj',
    fn: function () {
         var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
             console.log(this.name);  //my name is window
         }, 1000)
     }
}如果没有特殊指向,setInterval和setTimeout的回调函数中this的指向都是window。这是因为JS的定时器方法是定义在window下的。

2.js中window.requestAnimationFrame 延迟时间的计算

var  old=new Data().getTime();
   jishi: function () {
            var newtime = new Date().getTime();
            if (newtime - .old>= 1000) {
                old = newtime;
               执行循环的函数
            }
         window.requestAnimationFrame(jishi);
        }

3.图片轮播中点进入切当前对应图片(不考虑图片最优转法)

for (var i = 0; i < that.radius1.length; i++) {
                that.radius1[i].index = i;
                that.radius1[i].onmouseenter = function () {
                  var c_index = Math.abs(this.index - that.num);
                    if (this.index < that.num) {   当前在之前左边
                        that.donghua(that.radius1.length - c_index);
                    }
                    else if (this.index > that.num) {  当前在之前右边
                        that.donghua(c_index);
                    }
                }
            }

4.scrollLeft:是该元素的显示(可见)的内容与该元素实际的内容的距离。

猜你喜欢

转载自blog.csdn.net/weixin_44746630/article/details/91170776