阅读 1304

记一个JavaScript图片轮播思路与代码

说在前头

      喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写点东西,算是完成自己的一个小目标,也是抛砖引玉吧,错误或者建议尽管砸过来,反正我头铁,嘿嘿。

前因后果 & Code Address

      前几天,项目需要,自己撸了一个JavaScript图片轮播,加之又看了不少不用Jquery,直接上JavaScript的文章,也就突发奇想,自己也写一个JavaScript而不依赖Jquery这样的前端用的图片轮播。
      恰好掘金上没找到类似文章,那么我来填这个空,JavaScript IE9+ 图片轮播传送门,链接地址是前几天同是掘金上,我发布分享的我自己的Github Demo地址,因为刚封装好这个图片轮播,迫不及待得想分享给大家,所以文章都没写就直接上了,现在想想,觉得还是有必要来写点东西的。

需求&结果

      美丽温柔大方的UI小姐姐给出的设计上是类似下图示的轮播,灰底白圆的部分是图片的索引栏位置,点数量与根据轮播图数量走的,白色部分都可以视为图片显示区域,而灰底部分实际也是透明的,只能看到白圆,为了避免图片也是白色衬底,白圆也是要加上灰色边框border的。

设想效果图
那么来看看实际实现后的效果
实际效果图
细心的你能够发现其中的功能点有以下

  • 1.自动轮播滚动
  • 2.支持拖动滚动
  • 3.索引点击滚动
  • 4.图片超链接跳转(这个看不到,但是我加上了)
  • 5.切换效果(这个视为隐藏固定需求)

多思路探讨

思路原型1

      一般我看到的轮播图设计原型是将所有图片作线性排列,使用margin-left或position+left等方法控制,通过改变整体或每个单体元素的偏移值(margin-left或left来实现滚动与切换)实现滚动,但偏移时,整体节点结构不会发生改变,如下图五彩图示,黑线框为用户眼睛实际能看到的地方,这么做,在初始状态就要生成所有元素色块,滚动时,改变 装载色块整体 的偏移量的方案比改变 每个色块 的偏移量的方案要更优,因为后者方案在色块较多时,js操作的对象更多,性能消耗会更高。

设想实现原型1

我的思路原型

      我使用3个色块来装载图片,类似左轮手枪,我这只有3个弹容,每次要看什么图片才会装载进去,初始时,位置“2”装载第一张图,位置“3”装载第二张图,位置“1”装载最后一张图

我的思路原型
      偏移后,偏移方向的节点被打出,弹夹滚动,并加入新节点,见下图,此时位置“1”的内容装载的是位于位置“3”图片后的下一张图片,反向偏移则装载前一张图片,若图片用尽,则按图片滚动方向确定放入第一张图片开始或最后一张图片。
我的思路原型
      而我作出以上个人轮播图设计原型的选择,是基于轮播图可拖动的交互+无缝循环滚动的想法,按照思路原型1,在首末位置滚动时,势必要回滚才能到达另一侧,当然,有改进方法也可以实现思路原型1无缝循环滚动,但是需要对每个色块节点进行对象操作,色块越多,性能就越容易凉凉,但是,如果,轮播图不需要支持拖动,那么,思路原型1是不错的实现方案。

代码实现

这部分内容,想了解的小伙伴还是直接去看看吧,都是我自己写的,喜欢给star噢,英语不好的同学,请使用Chrome右键翻译中文
JavaScript IE9+ 图片轮播传送门
代码上主要就是

  • 1.初始化容器,滚动事件绑定(一定是委托事件监听!!!),装载内容,启动定时滚动
  • 2.拖动事件触发,暂定定时,拖动事件内方向判断,是否滚动判断
  • 3.滚动时,操作2个js对象偏移量,加上css translation过渡,实现效果,随后删除已不可见的js对象,在另一侧新增js节点,判断图片当前索引是否需要从头或尾重新开始并装载图片,索引点切换、

突然抛几个问题

  • 1.为啥要用委托事件
  • 2.js定时5s就一定是间隔5秒吗

补充一点,索引点的CSS切换效果是完全基于CSS的translation+width+left实现的,也是从咱们大掘金某个小兄弟那里得的灵感-不可思议的纯CSS导航栏下划线跟随效果

总结

      本JavaScript图片轮播
      先说缺点,兼容性一般,需要IE9+,手机端应该没问题,但我还没测试过,而且,滚动时始终要不停操作轮播的节点对象,这点来讲,此类图片轮播的确是...,反正性能是肯定要有所牺牲的,再者,点击索引点切换时,不是相邻的图片快速切换(切换图中在点其他切换)会有缝,有时还很大,头疼,哎呀呀,反正大家开心就好,现阶段暂时不会去优化噢。
      优点...能用...还行...有那么点意思,行吧,先写到这。嘿嘿 :P

关注下面的标签,发现更多相似文章
评论