纯css,js原生,js原型,jquery四种方式实现轮播图效果

项目地址:

http://younglight.top/resume/projects/slide/index.html

项目描述:

本项目是一个较小的项目,分别通过css3、js原生、js原型、jquery四种不同的方式实现普通的轮播效果,滑动效果自然流畅,在主流浏览器新版本中兼容性较好。实例源代码中有自己条理清晰的注释及实现思路。可直接用于实际开发。

项目职责:

  1. 通过合理的html结构以及css3的animation动画属性等完成css轮播效果。

  2. 通过相框列表的定位属性,事件机制,setInterval()方法等实现原生js轮播效果。

  3. 通过js原型,原型继承,this等基础知识实现可复用的基于原型的轮播效果。

  4. 通过jquery选择器,jq动画效果等jq技术实现jq轮播效果。

项目总结:

  1. 通过做轮播图,使得自己对于css3的动画部分有了更加深刻的理解认识,同时也认识到了自己的不足。css3更加的强大的动画效果还是需要认真钻研。

  2. 使用js原生实现让我对于js中的事件机制,线程,性能优化,以及闭包this等概念都有了更加清楚的认识,总是在想办法实现更加流畅自然的轮播效果。

  3. 通过js原型的实现,让我对js原型以及this指向的认识不再仅仅是基于理论,让我开始重视自己的面向对象编程思想的培养。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值