slider组件重构【原创】

今天把网站的slider组件统一了一下，心得总结

1。像一般焦点图，滚动字幕，相册列表，包括自定义滚动条，其实原理都是一样，组件的内部逻辑是可以共用的，不必弄很多组件出来，一个JS就可以搞定

2。对于组件我的习惯用法是直接绑定自定义属性，让页面加载之后自动执行，不需要想JQUERY组件一样，还需要穿一些配置参数进去，其实参数可以直接写入标签的自定义属性上面

效果：
http://ceshi.sgamer.com/test/slider.html

优点：
1.加载即执行，页面上可以存在N个slider组件
2.无需添加初始化代码
3.用自定义事件用来解耦，切换会触发change_silder事件
4.方法拆的很细，添加新的组件，写少量JS即可完成

描述：
最为复杂也是功能最为强大的一个，将滚动的算法和逻辑包装成统一模块，功能包含焦点图，滚动信息，相册列表

一共标签分为：slider-list，slider-idxs, slider-idx, slider-scroll, slider-prev, slider-next

slider-list: 所有的配置信息都将配置在这个标签上，滚动滑块不管怎么样的表现形式，列表结构都是差不多

slider-idxs：只在焦点图中使用，存放焦点图button列表的容器，可以是小方块也可以缩略图

slider-idx ：只在焦点图，和相册中使用，用来标记列表项，做关联使用

slider-scroll：滑块的滚动条事件

slider-prev：只在滚动信息，和相册中使用到，表示上一页

slider-next：只在滚动信息，和相册中使用到，表示上一页


焦点图：

<div class="slide" slider-list="s1" speed="500" delay="2000" direction="0" shownum="1" mode="focus" eventname="focus_index">

slider-list slider组件列表块都是依据这个id名来做关联的

eventname 因为列表分分两种情况，一种是静态，一种是动态写入，对于动态写入，就必须要加eventname属性，里面值为自定义事件的名字，动态写入后
SG.PAGE_EVENT.fire("focus_index",{});即可

speed 执行动画的毫秒数，设置越大，动画效果越慢，相反则越快

delay 只在mode为focus,marquee时候有效,延迟多少秒执行播放

direction 方向是垂直还是横向

shownum 显示区域显示几个

mode 目前有focus，marquee，list

<div slider-idxs="s1" class="slide_btn">
<span class="on" slider-idx="0">1</span>
<span slider-idx="1">2</span>
</div>

slider-idxs 为焦点图的按钮部分

slider-idx 为单个按钮项，下标从0开始，当前选中，组件会默认给加上on的央视名嘴

滚动信息：

<ul slider-list="s2" mode="marquee" shownum="1" direction="1" delay="3000" speed="500" >
<div class="narrow fr">
<span class="up" slider-prev="s2"></span>
<span class="down" slider-next="s2"></span>
...
</div>

slider-prev 向上箭头

slider-next 向下箭头


相册列表：

<ul slider-list="s3" speed="500" delay="2000" movenum="3" offset="2" direction="0" shownum="4" mode="list">
    <li slider-idx="0" class="on" style="background-color:red"></li>
    <li slider-idx="1" style="background-color:red"></li>
    ...
</ul>
<input type="button" value="左" slider-prev="s3">
<input type="button" value="右" slider-next="s3">

movenum 只在mode为list时候有效，每次移动几个图片，当movenum大于shownum，则movenum默认被设置为shownum
offset 只在mode为list时候有效，代表点击图片时候效果，默认为1，既是指点击末尾两端最后一张图片会有效果，如果设置成2，点击末尾两端最后两张会有动画效果
通过id关联，slider-idxs="s1" ，slider-list="s1" , slider-prev="s1" ,slider-next="s1" 必须唯一



注：如果要使用组件的话,做以下处理，引用JQUERY文件即可
SG   替换为   $
SG.PAGE_EVENT.on  替换为  $(document).bind
SG.PAGE_EVENT.fire  替换为  $(document).trigger