PhoneGap中文网

标题: 支持JqMobi的焦点图幻灯片，支持手势、自动播放 [打印本页]

作者: ljq 时间: 2014-12-5 16:54
标题: 支持JqMobi的焦点图幻灯片，支持手势、自动播放
本帖最后由 ljq 于 2014-12-5 16:57 编辑

HTML部分

<div class="scroll">
<div class="slide_01" id="slide_01">
<div class="mod_01"><a href="/News/NewsShow/?id=6578"><img src="/Content/images/banner_01.jpg" width="100%" ></a></div>
<div class="mod_01"><a><img src="/Content/images/banner_02.jpg" width="100%" ></a></div>
<div class="mod_01"><a href="http://weixin.zto.cn/html/job/?url=wap"><img src="/Content/images/banner_job.jpg" width="100%" alt="中通招聘"></a></div>
</div>
<div class="dotModule_new">
<div id="slide_01_dot"></div>
</div>
</div>

复制代码

css部分

/*焦点图滚动*/
.scroll{position:relative;overflow:hidden;}
.mod_01{float:left; }
.mod_01 img{display:block; }
.dotModule_new{padding:0 5px;height:11px;line-height:6px;-webkit-border-radius:11px;background:rgba(45,45,45,0.5);position:absolute;bottom:5px;right:10px;z-index:11;}
#slide_01_dot{text-align:center;margin:1px 0 0 0;}
#slide_01_dot span{display:inline-block;margin:0 3px;width:5px;height:5px;vertical-align:middle;background:#f7f7f7;-webkit-border-radius:5px;}
#slide_01_dot .selected{background:#66ff33;}

复制代码

js文件