模仿虎牙幻灯片使用面向对象思想封装的插件

     虎牙是一个直播网站，很多年轻人都喜欢的网站。那天我看到虎牙的幻灯片做的挺好看的，于是就模仿着谢了一个插件，关键是它不像旋转木马幻灯片，能很好的解决偶数帧的问题，下面贴上我的源码地址：https://github.com/CuteBlackCat/huya-slider

   简单介绍一下，这个幻灯片使用了jQuery库，用面向对象的方式写的一个插件。他可以随意更改图片、宽高、切换速度、是否轮播等。这个轮播图我觉得比一般的轮播图好看很多，效果也很美观。主要体现在切换的时候会让使用者觉得是由无到有的过程，当使用索引的时候，如果当前帧与目的帧的间隔超过2，那么会是一种弹出式的感觉。总之很优雅、美观。

   效果图如下（也可以看虎牙网站的效果）：

  我大致的思想分为以下几步：

1. 构建初步的HTML、CSS样式；
2. 封装一个类，能够获取自定义的数据然后转换为JSON格式；
3. 根据帧的数目来创建span节点（也可以创建li）即下方的索引；
4. 动态设置按钮、ul的样式以及最初li的样式；
5. 根据当前帧的样式来动态改变其它帧的样式。

  期间我也遇到很多问题：

1. 我最初的想法是能记录切换是每一帧记录前一帧的样式，但是这就不能很好的解决下方索引的变换，于是我就想使用索引来每次都遍历一遍吧；
2. 期间遇到z-index无效的问题，这个可以浏览http://www.cnblogs.com/cuteblackcat/p/6669237.html；
3. 每次切换的时候两侧帧都是往中间靠拢的，而不是同方向移动的，但如果我直接设置他们的left到ul的外边，那么使用索引每隔两帧切换就不能是弹出的效果了（没显示的帧除了特殊帧都是width、height为0、所处位置在中间）。这个我用了先判断移动方向，假设是往左边轮播，那么我的left值即刻改变为负的一个按钮的宽度，，然后再用animate函数来将left改变为0，就可以了那么就很好地显示了。
4. 每次轮播完了要怎么从第一张开始轮播呢？

   //定义一个循环i的函数,
   		iLoop:function(i){
   			if(i >= this.sliderItem.length){
   				return i %= this.sliderItem.length;
   			}else if(i < 0){
   				return i += this.sliderItem.length;
   			}else{
   				return i;
   			}
   		},
   

   　　期间还有很多小细节就不阐述了

  可能写的很抽象，可以先看看虎牙的效果，也可以看看我的源码。我个人觉得我的代码的解决方式不是很好，如果有建议还请指教。

转载于:https://www.cnblogs.com/cuteblackcat/p/6669509.html