多终端轮播/单帧广告组件-[idata流量管家版本]
使用场景：PC和移动端
一个基于内部内容系统的多终端轮播组件，自适应广告轮播的PC端轮播点击切换&移动端滑屏切换。
新增对idata流量管家的单帧广告的支持，
轮播/单帧使用方式和AMS版本一致
组件CDN
<script src="//ossweb-img.qq.com/images/js/comm/idata.tgads.js"></script>
单帧广告使用
<a href='#' data-tgadieg='16361,22216'></a>
或
<a href='#' data-TGAD='16361,22216'></a>
idata流量管家的广告位列表有个“复制单帧广告代码”，老版新版代码都支持。第一个参数是频道ID，第二个是广告位ID。
[warning] 注意
轮播组件的使用
在页面引入CSS
和ams版本相同，不赘述，代码在下方，或【查看demo】
在页面引入js
和ams版本相同，代码在下方，或【查看demo】唯一区别就是，info这个参数不再（可能是暂时？）不支持广告组ID。请手动把轮播需要的广告位ID都填进去吧。组件在展示的时候会自动过滤空广告位，不会报错
idata多终端轮播/单帧广告组件Demo
多终端轮播/单帧广告组件-[AMS版本]
使用场景：PC和移动端
一个基于内部内容系统的多终端轮播组件，自适应广告轮播的PC端轮播点击切换&移动端滑屏切换。
目前加入了支持ams单帧广告的需求。（引用旧的ams单帧广告组件tgshow.min.js的同学注意，会引用tcss点击流覆盖PTT上报，请更改为本组件，页面dom不用修改)
组件CDN
<script src="//ossweb-img.qq.com/images/js/comm/tgAds.min.js"></script>
单帧广告使用方法
<a href='#' data-tgadieg='16361,22216'></a>
或
<a href='#' data-TGAD='16361,22216'></a>
- ams广告位列表有个“复制单帧广告代码”，贴入即可，第一个参数是频道ID，第二个是广告位ID。
- 单帧广告在页面中插入标签+广告id即可自动渲染，若后期动态插入的，则需要插入a标签后运行tgAds.run()或者iData_New_Tplparser.run()触发渲染
- 需要额外显示广告标题，则添加data-dom="span"属性（span可以换成em、i、p之类的标签），示例：
- PTT上报直接自己写在onclick里即可，target='_blank'也自己决定是否设置
- demo
以下是轮播广告的使用方法
在页面引入CSS
<style>
.ggBox { width:640px; height:300px;}/*修改成广告图片的尺寸即可*/
.ggBox { position:relative; background:#0e97dc; overflow:hidden}
/*以下是轮播的图片样式，不用修改*/
.adPic { position:absolute; width:100%; height:100%; left:0; top:0}
.adPic a { display:block; width:100%; height:100%; overflow:hidden; position:absolute; left:0; top:0; background:#0e97dc}
.adPic img { width:100%; height:100%; position:absolute; top:0; left:0}
.adPic p { position:relative; padding-top:50px}
.loadI { width:130px; text-align:center; line-height:20px; color:#FFF; background:#18b2ff; margin:0px auto; display:block}
.adPicUl { width:1000%; height:100%; overflow:hidden; -webkit-transition: all 0.1s linear; -webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden}
.adPicUl li { float:left; width:14.3%; height: 100%;}
.adPicUl a { display:block; width:100%; height: 100%}
.adPicUl img { display:block; width:100%; height:100%}
/*以下是轮播小按钮样式，可按设计稿自己修改~*/
.adBtn { position:absolute; z-index:2; right:17px; bottom:20px; height:20px}
.adBtn a { display:block; float:left; text-indent:-5000px; margin-right:3px; overflow:hidden; width:19px; height:19px; background-image:url(http://ossweb-img.qq.com/images/game/portal2012/roll_btn.png); background-repeat:no-repeat; background-position:0 1px}/*小按钮样式*/
a.on { background-position:-19px 1px;_background:#efefef}/*小按钮当前帧样式*/
.adBtn a:hover { background-position:-19px -18px}/*小按钮鼠标经过样式*/
</style>
[warning] 注意
- 除了".ggBox"样式名可以自己起，其他样式都是写到了dom结构里所以className不能修改；
- 如果页面有几个轮播，尺寸不一，样式不一，则给每个轮播起类似".ggBox1"，".ggBox2"这样的样式名，然后按钮样式就用 ".ggBox1 .adBtn a {}"这样的形式区分，
- 轮播上的小按钮默认样式是小圆点，但是小按钮内是有插入广告名字的，只是用text-indent:-5000px隐藏了。如果需要显示名字就自己修改样式~）
在页面引入js
ggID、info默认是测试数据，请重构时根据所属项目询问接口人要正确的ID
<div class="ggBox" id="ggBox"></div>
<script src="//ossweb-img.qq.com/images/js/PTT/ping_tcss_tgideas_https_min.js"></script>
<script src="//ossweb-img.qq.com/images/js/comm/tgAds.min.js"></script>
<script>
//此段代码不能放到外链JS中，不要擅自增加或者删改对象属性
var setSite = { //设置网站属性
siteType: "os", //必填项:官网填写"os"，活动专题填写活动目录名称如："a20160701xxx"，
pageType: "index", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN
pageName: "首页", //必填项:页面中文名
osact: 0, //选填项:是否是官网专题(在官网运营的专题)boolean；默认是0；可以在链接上加入参数osact=1来灵活设置
ingame: 0, //选填项:是否投放在游戏APP内boolean；默认是0；可以在链接上加入参数ingame=1来灵活设置
stayTime: 0 //选填项:是否需要统计停留时长boolean；默认是0
}
if (typeof (pgvMain) == 'function') pgvMain();//千万不能忘记！
//ggID、info默认是测试数据，请重构时根据所属项目询问接口人要正确的ID
var rollad = new tgAds({
ggID: '15938',//填写轮播广告所属的频道ID("频道管理"-"频道ID")
info: '201710',//,info:'201206' //info的值可以有2种形式：1.直接填写需要的这几帧的广告位ID("广告位管理"-"广告位ID") |或者| 2.填写广告位所属组ID("广告位管理"-"广告位所属组ID"),然后会自动拉取此组下所有帧广告，然后按照广告位排序来输入1234..帧。
box: 'ggBox',//[可选参数]填写放置广告的div的ID//以下参数都是可选！
pgv: 'mainAd',// PTT点击流'mainAd'：点击流名称，序号会自动加，会自动上报:PTTSendClick('adRoll','mainAd1','轮播广告1')
auto: false,//[可选参数]false移动端禁止自动滚动，不添加此项或者true为定时自动滚动
mouse: false,//[可选参数,若点击触发请删掉此项]，true为鼠标经过小按钮触发翻页。false和默认为点击小按钮触发翻页。最好是点击触发，不然晃得眼花
noUrl: false,//[可选参数]如果只纯展示不希望点击跳转请用这个参数
callBack: function () {
//[可选参数]在广告准备完毕后运行的回调函数
//console.log('一共有' + this.btns.length + '个广告')
}
});
</script>
用法示例：多组轮播+单帧+动态插入单帧