API Docs for: 0.2
Show:

JC.Slider Class

Slider 划动菜单类
页面加载完毕后, Slider 会查找那些有 class = js_autoSlider 的标签进行自动初始化

require: jQuery , JC.common

JC Project Site | API docs | demo link

可用的 html attribute

slidersubitems
指定具体子元素是那些, selector ( 子元素默认是 layout的子标签 )
sliderleft
左移的触发selector
sliderright
右移的触发selector
sliderwidth
主容器宽度
slideritemwidth
子元素的宽度
sliderhowmanyitem
每次滚动多少个子元素, 默认1
sliderdefaultpage
默认显示第几页
sliderstepms
滚动效果运动的间隔时间(毫秒), 默认 5
sliderdurationms
滚动效果的总时间
sliderdirection
滚动的方向, 默认 horizontal, { horizontal, vertical }
sliderloop
是否循环滚动
sliderinitedcb
初始完毕后的回调函数, 便于进行更详细的声明
sliderautomove
是否自动滚动
sliderautomovems
自动滚动的间隔

Constructor

JC.Slider

(
  • _selector
)

Parameters:

Example:

       <style>
           .hslide_list dd{ display: none; }
           .hslide_list dd, .hslide_list dd img{
               width: 160px;
               height: 230px;
           }
           .slider_one_item dd, .slider_one_item dd img{
               width: 820px;
               height: 230px;
           }
       </style>
       <link href='../../Slider/res/hslider/style.css' rel='stylesheet' />
       <script src="../../../lib.js"></script>
       <script src="../../../config.js"></script>
       <script>
           JC.debug = true;
           requirejs( [ 'JC.Slider' ] );
           function sliderinitedcb(){
               var _sliderIns = this;
               JC.log( 'sliderinitedcb', new Date().getTime() );
               _sliderIns.on('outmin', function(){
                   JC.log( 'slider outmin' );
               }).on('outmax', function(){
                   JC.log( 'slider outmax' );
               }).on('movedone', function( _evt, _oldpointer, _newpointer){
                   JC.log( 'slider movedone', _evt, _oldpointer, _newpointer );
               }).on('beforemove', function( _evt, _oldpointer, _newpointer ){
                   JC.log( 'slider beforemove', _evt, _oldpointer, _newpointer );
               });
           }
       </script>
       <table class="hslide_wra">
           <tr>
               <td class="hslide_left">
                   <a href="javascript:" hidefocus="true" style="outline:none;" class="js_slideleft">左边滚动</a>
               </td>
               <td class="hslide_mid">
                   <dl 
                       style="width:820px; height: 230px; margin:0 5px;"
                       class="hslide_list clearfix js_slideList js_autoSlider" 
                       slidersubitems="> dd" sliderleft="a.js_slideleft" sliderright="a.js_slideright" 
                       sliderwidth="820" slideritemwidth="160"
                       sliderdirection="horizontal" sliderhowmanyitem="5"
                       sliderloop="false" sliderdurationms="300"
                       sliderinitedcb="sliderinitedcb"
                       >
                       <dd style="display: block; left: 0; " class="tipsItem">content...</dd>
                       <dd style="display: block; left: 0; " class="tipsItem">content...</dd>
                       <dd style="display: block; left: 0; " class="tipsItem">content...</dd>
                   </dl>
               </td>
               <td class="hslide_right">
                   <a href="javascript:" hidefocus="true" style="outline:none;" class="js_slideright">右边滚动</a>
               </td>
           </tr>
       </table>

Methods

_init

() private

内部初始化方法

Returns:

bool

_initAutoMove

() private

初始化自动滚动
如果 layout 的 html属性 sliderautomove=ture, 则会执行本函数

Returns:

SliderInstance

find

(
  • _selector
)

查找 layout 的内容

Parameters:

  • _selector Selector

Returns:

selector

getInstance

(
  • _selector
  • _ins
)
static

从 selector 获得 或 设置 Slider 的实例

Parameters:

  • _selector Selector
  • _ins SliderInstance

Returns:

SliderInstance

init

(
  • _selector
)
static

批量初始化 Slider

Parameters:

  • _selector Selector

Returns:

array

isSlider

(
  • _selector
)
static

判断 selector 是否具备 实例化 Slider 的条件

Parameters:

  • _selector Selector

Returns:

bool

layout

()

获取 Slider 的主外观容器

Returns:

selector

move

(
  • _backwrad
)

控制 Slider 向左或向右划动

Parameters:

  • _backwrad Bool

    _backwrad = ture(向左), false(向右), 默认false

Returns:

SliderInstance

moveTo

(
  • _newpointer
)

控制 Slider 划动到指定索引

Parameters:

  • _newpointer Int

Returns:

SliderInstance

on

(
  • _evtName
  • _cb
)

自定义事件绑定函数
使用 jquery on 方法绑定 为 Slider 实例绑定事件

Parameters:

Returns:

SliderInstance

page

(
  • _ix
)

获取指定索引页的 selector 对象

Parameters:

  • _ix Int

Returns:

array

pointer

()

获取 Slider 的当前索引数

Returns:

int

totalpage

()

获取 Slider 的总索引数

Returns:

int

trigger

(
  • _evtName
)

自定义事件触发函数
使用 jquery trigger 方法绑定 为 Slider 实例函数自定义事件

Parameters:

Returns:

SliderInstance

Properties

autoInit

Bool static

页面加载完毕后, 是否自动初始化 带有 class=js_autoSlider 的应用

Default: true