slider(slider模块)

2016-07-20

作者：dereksu
版本：v.1
依赖：mocha.min.css slider.min.js

样式一（demo1）没有接入广告系统 `.mocha-slider-scheme1`

<div id="slider1" data-psdw="640" data-sliderw="640" data-sliderh="330" class="mocha-slider mocha-slider-scheme1 mocha-slider-skin1">
  <ul class="content">
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-2.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-3.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-4.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-5.jpg" alt=""></a></li>
  </ul>
</div>

可以在您的css中覆盖.mocha-slider-scheme1.mocha-slider-skin1皮肤类

/* skin */
.mocha-slider-scheme1.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:10px;height:10px;text-align:right;}
.mocha-slider-scheme1.mocha-slider-skin1 .controller li{width:20px;height:4px;margin:3px;background-color:#8a8a8a;}
.mocha-slider-scheme1.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider1
  slider.type(1, [{
    id: "slider1",
    callback: function() {
      console.log('slider1创建完成');
      sliderObj.slider1.play();
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}

名称

类型

描述

String

slider的id

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式一（demo2）有接入广告系统 `.mocha-slider-scheme1`

<div id="slider2" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow1" data-psdw="640" data-sliderw="580" data-sliderh="300" class="mocha-slider mocha-slider-scheme1 mocha-slider-skin1">
  <ul class="content">
    <li data-posid="12359"></li>
    <li data-posid="12360"></li>
    <li data-posid="12361"></li>
    <li data-posid="12362"></li>
  </ul>
</div>

可以在您的css中覆盖.mocha-slider-scheme1.mocha-slider-skin1皮肤类

/* skin */
.mocha-slider-scheme1.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:10px;height:10px;text-align:right;}
.mocha-slider-scheme1.mocha-slider-skin1 .controller li{width:20px;height:4px;margin:3px;background-color:#8a8a8a;}
.mocha-slider-scheme1.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度
data-channelid	频道ID，`不配置data-channelid，将不读取广告系统数据` 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlink	true/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefix	slider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid	广告位ID

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider2
  slider.type(1, [{
    id: "slider2",
    callback: function() {
      console.log('slider2创建完成');
      sliderObj.slider2.play();
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}

名称

类型

描述

String

slider的id

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式二（demo1）没有接入广告系统 `.mocha-slider-scheme2`

<div id="slider3" data-psdw="640" data-sliderw="640" data-sliderh="330" class="mocha-slider mocha-slider-scheme2 mocha-slider-skin1">
  <ul class="content">
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
    <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/640x330-6.jpg" alt=""></a></li>
  </ul>
</div>

可以在您的css中覆盖.mocha-slider-scheme2.mocha-slider-skin1皮肤类

/* skin */
.mocha-slider-scheme2.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:0;height:10px;text-align:center;}
.mocha-slider-scheme2.mocha-slider-skin1 .controller li{width:20px;height:4px;margin:3px;background-color:#8a8a8a;}
.mocha-slider-scheme2.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider3
  slider.type(2, [{
    id: 'slider3',
    controllerH: 24,
    callback: function() {
      console.log('slider3创建完成');
      sliderObj.slider3.play();
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}

名称

类型

描述

String

slider的id

controllerH

Number

slider底部controller多余的高度（实际值）

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式二（demo2）有接入广告系统 `.mocha-slider-scheme2`

<div id="slider4" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow2" data-psdw="640" data-sliderw="580" data-sliderh="300" class="mocha-slider mocha-slider-scheme2 mocha-slider-skin1">
  <ul class="content">
    <li data-posid="12359"></li>
    <li data-posid="12360"></li>
    <li data-posid="12361"></li>
    <li data-posid="12362"></li>
  </ul>
</div>

可以在您的css中覆盖.mocha-slider-scheme2.mocha-slider-skin1皮肤类

/* skin */
.mocha-slider-scheme2.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:0;height:10px;text-align:center;}
.mocha-slider-scheme2.mocha-slider-skin1 .controller li{width:20px;height:4px;margin:3px;background-color:#8a8a8a;}
.mocha-slider-scheme2.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度
data-channelid	频道ID，`不配置data-channelid，将不读取广告系统数据` 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlink	true/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefix	slider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid	广告位ID

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider4
  slider.type(2, [{
    id: 'slider4',
    controllerH: 24,
    callback: function() {
      console.log('slider4创建完成');
      sliderObj.slider4.playTo(1);
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}

名称

类型

描述

String

slider的id

controllerH

Number

slider底部controller多余的高度（实际值）

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式三（demo1）没有接入广告系统 `.mocha-slider-scheme3`

<div id="slider5Wrapper" class="mocha-slider-wrapper">
  <div id="slider5" data-psdw="640" data-sliderw="560" data-sliderh="300" class="mocha-slider mocha-slider-scheme3 mocha-slider-skin1">
    <ul class="content">
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/560x300.jpg" alt=""></a></li>
    </ul>
  </div>
  <a href="javascript:void(0);" class="mocha-slider-btn mocha-slider-btn-skin1 prevBtn">&lt;</a>
  <a href="javascript:void(0);" class="mocha-slider-btn mocha-slider-btn-skin1 nextBtn">&gt;</a>
</div>

可以在您的css中覆盖.mocha-slider-scheme3.mocha-slider-skin1和.mocha-slider-btn-skin1皮肤类

/* skin */
.mocha-slider-scheme3.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:0;height:20px;text-align:center;}
.mocha-slider-scheme3.mocha-slider-skin1 .controller li{width:10px;height:10px;margin:5px;border-radius:50%;-webkit-border-radius:50%;background-color:#8a8a8a;}
.mocha-slider-scheme3.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}
/* slider-btn-skin */
.mocha-slider-btn-skin1{color:#fff;font-size:.16rem;font-weight:bolder;padding:.08rem;width:.50rem;height:.50rem;line-height:.50rem;top:50%;background-color: #a72525;border-radius: 50%;-webkit-border-radius: 50%;}
.mocha-slider-btn-skin1.prevBtn{left:-.47rem;text-align: right;}
.mocha-slider-btn-skin1.nextBtn{right:-.47rem;text-align: left;}

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider5
  slider.type(3, [{
    id: 'slider5',
    controllerH: 34,
    callback: function() {
      console.log('slider5创建完成');
      sliderObj.slider5.play();
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}

名称

类型

描述

String

slider的id

controllerH

Number

slider底部controller多余的高度（实际值）

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式三（demo2）有接入广告系统 `.mocha-slider-scheme3`

<div id="slider6Wrapper" class="mocha-slider-wrapper">
  <div id="slider6" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow3" data-psdw="640" data-sliderw="560" data-sliderh="300" class="mocha-slider mocha-slider-scheme3 mocha-slider-skin2">
    <ul class="content">
      <li data-posid="12359"></li>
      <li data-posid="12360"></li>
      <li data-posid="12361"></li>
      <li data-posid="12362"></li>
    </ul>
  </div>
  <a href="javascript:void(0);" class="mocha-slider-btn mocha-slider-btn-skin1 prevBtn">&lt;</a>
  <a href="javascript:void(0);" class="mocha-slider-btn mocha-slider-btn-skin1 nextBtn">&gt;</a>
</div>

可以在您的css中覆盖.mocha-slider-scheme3.mocha-slider-skin2和.mocha-slider-btn-skin1皮肤类

/* skin */
.mocha-slider-scheme3.mocha-slider-skin2 .controller{position:absolute;bottom:7px;right:0;height:10px;text-align:center;}
.mocha-slider-scheme3.mocha-slider-skin2 .controller li{width:10px;height:10px;margin:0 5px;border-radius:50%;-webkit-border-radius:50%;background-color:#8a8a8a;}
.mocha-slider-scheme3.mocha-slider-skin2 .controller li.current{background-color:#ffdb72;}
/* slider-btn-skin */
.mocha-slider-btn-skin1{color:#fff;font-size:.16rem;font-weight:bolder;padding:.08rem;width:.50rem;height:.50rem;line-height:.50rem;top:50%;background-color: #a72525;border-radius: 50%;-webkit-border-radius: 50%;}
.mocha-slider-btn-skin1.prevBtn{left:-.47rem;text-align: right;}
.mocha-slider-btn-skin1.nextBtn{right:-.47rem;text-align: left;}

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度
data-channelid	频道ID，`不配置data-channelid，将不读取广告系统数据` 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlink	true/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefix	slider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid	广告位ID

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider6
  slider.type(3, [{
    id: 'slider6',
    controllerH: 0,
    callback: function() {
      console.log('slider6创建完成');
      sliderObj.slider6.play();
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}

名称

类型

描述

String

slider的id

controllerH

Number

slider底部controller多余的高度（实际值）

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式四有接入广告系统 `.mocha-slider-scheme4`

<div id="slider7" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow4" data-psdw="640" data-sliderw="640" data-sliderh="380" data-liwidth="300" data-lipadding="20" class="mocha-slider mocha-slider-scheme4 mocha-slider-skin1">
  <ul class="content">
    <li data-posid="12359"></li>
    <li data-posid="12360"></li>
    <li data-posid="12361"></li>
    <li data-posid="12362"></li>
  </ul>
</div>

可以在您的css中覆盖.mocha-slider-scheme4.mocha-slider-skin1皮肤类

/* skin */
.mocha-slider-scheme4.mocha-slider-skin1 .controller{position:absolute;bottom:7px;right:0;height:20px;text-align:center;}
.mocha-slider-scheme4.mocha-slider-skin1 .controller li{width:10px;height:10px;margin:5px;border-radius:50%;-webkit-border-radius:50%;background-color:#8a8a8a;}
.mocha-slider-scheme4.mocha-slider-skin1 .controller li.current{background-color:#ffdb72;}

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度
data-channelid	频道ID，`不配置data-channelid，将不读取广告系统数据` 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlink	true/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefix	slider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid	广告位ID

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider7
  slider.type(4, [{
    id: 'slider7',
    controllerH: 34,
    callback: function() {
      console.log('slider7创建完成');
      sliderObj.slider7.play();
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,controllerH:0,callback:function(){}}

名称

类型

描述

String

slider的id

controllerH

Number

slider底部controller多余的高度（实际值）

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式五（demo1）没有接入广告系统 `.mocha-slider-scheme5`

<div id="slider8" data-psdw="640" class="mocha-slider-wrapper">
  <div data-sliderw="640" data-sliderh="330" data-slidermarginbottom="20" class="gallery-top mocha-slider">
    <ul class="content">
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-1.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-2.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-3.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-4.jpg" alt=""></a></li>
      <li><a href='#'><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-5.jpg" alt=""></a></li>
    </ul>
  </div>
  <div data-sliderw="640" data-sliderh="110" data-lipaddingright="20" class="gallery-thumbs mocha-slider mocha-slider-scheme5">
    <ul class="content">
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-1.jpg" alt=""></li>
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-2.jpg" alt=""></li>
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-3.jpg" alt=""></li>
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-4.jpg" alt=""></li>
      <li><img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/gallery-640x330-5.jpg" alt=""></li>
    </ul>
  </div>
</div>

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度
data-slidermarginbottom	大图与小图之间的间隙
data-lipaddingright	小图之间的间隙

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider8
  slider.type(5, [{
    id: 'slider8',
    callback: function() {
      console.log('slider8创建完成');
      sliderObj.slider8.play();
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}

名称

类型

描述

String

slider的id

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式五（demo2）有接入广告系统 `.mocha-slider-scheme5`

<div id="slider9" data-channelid="14482" data-showlink="true" data-tcssprefix="a20151208mocha.index.actshow5" data-psdw="640" class="mocha-slider-wrapper">
  <div data-sliderw="580" data-sliderh="300" data-slidermarginbottom="20" class="gallery-top mocha-slider">
    <ul class="content">
      <li data-posid="12359"></li>
      <li data-posid="12360"></li>
      <li data-posid="12361"></li>
      <li data-posid="12362"></li>
    </ul>
  </div>
  <div data-sliderw="580" data-sliderh="110" data-lipaddingright="20" class="gallery-thumbs mocha-slider mocha-slider-scheme5">
    <ul class="content">
    </ul>
  </div>
</div>

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度
data-slidermarginbottom	大图与小图之间的间隙
data-lipaddingright	小图之间的间隙
data-channelid	频道ID，`不配置data-channelid，将不读取广告系统数据` 频道ID如http://game.qq.com/time/qqadv/Info_new_14482.js（14482）
data-showlink	true/false，代表slider每一项是否有a标签链接，不配置默认为true
data-tcssprefix	slider每一项的tcss点击流前缀，不配置将不添加点击流统计代码。格式如：a20151208mocha.index.actshow1
data-posid	广告位ID

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider9
  slider.type(5, [{
    id: 'slider9',
    callback: function() {
      console.log('slider9创建完成');
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}

名称

类型

描述

String

slider的id

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

样式六视频播放（暂不提供接入广告系统） `.mocha-slider-scheme6`

<div id="slider10" data-psdw="640" data-proportion="16-9" class="mocha-slider-wrapper">
  <div id="slider10_player" data-sliderw="640" data-slidermarginbottom="20" class="video-top mocha-slider" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videotop'})"></div>
  <div data-sliderw="640" data-sliderh="110" data-lipaddingright="20" class="video-thumbs mocha-slider mocha-slider-scheme6">
    <ul class="content">
      <li data-vid="b14016xwapw" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs1'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-1.jpg" alt="">
        <p>新版桶牛竞技场新版桶牛竞技场</p>
      </li>
      <li data-vid="d01452426av" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs2'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-2.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
      <li data-vid="h0144kvxbl2" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs3'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-3.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
      <li data-vid="h0144kvxbl2" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs4'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-4.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
      <li data-vid="i0144nkkkdy" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs5'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-5.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
      <li data-vid="w0144rtcynq" onclick="pgvSendClick({hottag:'a20151208mocha.index.videoslider1.videothumbs6'});">
        <img data-src="http://game.gtimg.cn/images/tgideas/act/a20151201mochademo/videoimg-320x180-6.jpg" alt="">
        <p>新版桶牛竞技场</p>
      </li>
    </ul>
  </div>
</div>

自定义属性说明

自定义属性	说明
data-psdw	设计稿宽度
data-sliderw	滑动块宽度
data-sliderh	滑动块高度
data-slidermarginbottom	大图与小图之间的间隙
data-lipaddingright	小图之间的间隙
data-proportion	视频尺寸比例如：16:9则填写16-9
data-vid	视频id
data-src	视频缩略图地址

创建实例

//Slider初始化
Slider.init(function(slider) {
  //创建实例sliderObj.slider10
  slider.type(6, [{
    id: 'slider10',
    callback: function() {
      console.log('slider10创建完成');
      sliderObj.slider10.play();
    }
  }]);
});

type(param1,parem2)参数描述

名称

类型

描述

param1

Number

数字代表Slider样式一~样式六（1-6）

param2

Array

数组存放一个或多个Object类型数据

{id:’’,callback:function(){}}

名称

类型

描述

String

slider的id

callback

Function

实例化完成的回调方法

slider实例可使用的方法

名称	类型	描述
play	Function	自动播放，如sliderObj.slider1.play();
playTo	Function	播放到第几个滑动块，如sliderObj.slider1.playTo(2);
stop	Function	停止自动播放，如sliderObj.slider1.stop();
prev	Function	播放前一个，如sliderObj.slider1.prev();
next	Function	播放后一个，如sliderObj.slider1.next();

文档

样式一（demo1）没有接入广告系统 .mocha-slider-scheme1

样式一（demo2）有接入广告系统 .mocha-slider-scheme1

样式二（demo1）没有接入广告系统 .mocha-slider-scheme2

样式二（demo2）有接入广告系统 .mocha-slider-scheme2

样式三（demo1）没有接入广告系统 .mocha-slider-scheme3

样式三（demo2）有接入广告系统 .mocha-slider-scheme3

样式四 有接入广告系统 .mocha-slider-scheme4

样式五（demo1）没有接入广告系统 .mocha-slider-scheme5

样式五（demo2）有接入广告系统 .mocha-slider-scheme5

样式六 视频播放（暂不提供接入广告系统） .mocha-slider-scheme6

样式一（demo1）没有接入广告系统 `.mocha-slider-scheme1`

样式一（demo2）有接入广告系统 `.mocha-slider-scheme1`

样式二（demo1）没有接入广告系统 `.mocha-slider-scheme2`

样式二（demo2）有接入广告系统 `.mocha-slider-scheme2`

样式三（demo1）没有接入广告系统 `.mocha-slider-scheme3`

样式三（demo2）有接入广告系统 `.mocha-slider-scheme3`

样式四有接入广告系统 `.mocha-slider-scheme4`

样式五（demo1）没有接入广告系统 `.mocha-slider-scheme5`

样式五（demo2）有接入广告系统 `.mocha-slider-scheme5`

样式六视频播放（暂不提供接入广告系统） `.mocha-slider-scheme6`