JQ--transform旋转焦点轮播图

  jquery.transform是基于jquery库的插件。兼容性好(可以兼容本不支持CSS3的IE浏览器)、使用简单。
   定时器:setInterval及setTimeout
	  1.setInterval是间隔执行。 setInterval(function(){},500);
          2.clearInterval(param)关闭定时器。//param=setInterval(function(){},500);
          3.setTimeout是延时执行。 *执行一次 setTimeout(function(){},500);
  作用域及作用域链:
	1.作用域(scope)是程序中定义这个变量的有效区域;
	2.全局变量和局部变量;
	3.作用域链的查询顺序是由内向外;
	4.javascript没有块级作用域;
  闭包的应用:
	1.闭包就是能够读取其他函数内部变量的函数。
	2.让这些变量的值始终保持在内存中。
	3.闭包可以保护函数内的变量安全。
  使用jQuery的each(function(i,value){ })来遍历list对象中的每一个li,其中i是li元素的索引,也就是第几个;获取到每一个元素的目的是,使得每一个li元素一次旋转-5°,0,5°,10°,那么每一个li对象旋转的角度就是元素的索引 (i)*5°-5°,使用jQuery插件对象的transform方法,传递旋转的角度,即$(this).transform({rotate:((i)*5°-5°)+“deg”});这样初始化角度就完成了。
另外还需要声明旋转对象的旋转中心点,也就是基准点,使用的是jquery插件的transform()方法指定基准点的位置$imglist.transform({origin:["125px","800px"]});
  在此处说明,on绑定和bind事件的区别,$(selector).bind(”click”,function(){}),当给a便签绑定点击事件的时候,只要点击a元素就会触发链接地址的跳转,如果只想触发点击事件而不跳转的话,在函数内部return false ,而这种绑定,只能使用bind()方法,如果使用on()方法绑定,即使return false也是没有作用的。
  将二维数组地址处理为图片:接收一个二维数组对象,然后把二维数组当做一维数组来遍历,然后就获取到了一维数组,之后再针对一维数组进行遍历,得到了实例对象,这个实例对象指向具体的图片,然后把对象返回出去,就拿到了图片对象。
  动画函数:当参数d为1时,向右旋转,为-1时向左旋转。所以anigo()函数需要接收一个参数,让当前的图片的组数+1等于d,如果0向右旋转,则d=1,同时图片的组数+1,如果向左旋转,d=-1,使得旋转的图片组数-1,那么表达式就是当前图片的组数+1=d。
②针对li集合进行遍历,找到对应的image,并初始化准备添加的图片对象,然后把目标图片添加到li容器中
③添加动画,使得当前的图片一次旋转一定的角度,并且将目标图片以初始化角度直接放置于li容器中,注意给图片相对于li容器定位,否则图片无法正常显示。
  以上是对慕课网视频中的要点笔记(不是很全),主要是自己跟着视频看了一遍感觉还是不会,于是再看第二遍时边看边码代码,但是还是出现各种错误,于是便找来源码一点点比对,感觉这个视频涉及的东西太多,作为刚入JQ的新手来说太多需要积累,JQ这个插件也确实好用,比JS少用了不少代码,自己上星期在忙于二级C,于是基础篇没怎么看,这星期赶着看感觉成果很少(还没看完),还需要大量的练习,以后也好直接引用网上的插件。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值