这是自己封装的原生js方法,为了偷懒,用了电jqurey。调用方法如下:
touchs._left(object)//往左滑动,
touchs._right(object)//往右滑动
touchs._top(object)//往上滑动
touchs._bottom(object)//往下滑动
说明:object的取值可以是一个id("#id")表达式,或者是一个样式表达式(".class"),或者标签的属性表达式("div[id=id]")等,只要可以用jqurey通过这个表达式获取到dom对象,这个表达式怎么写都可以。
jquery手机触屏左右滑动切换栏目$(function(){
TouchSlide({
slideCell:"#slideBox",
titCell:".myhd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
mainCell:".bd ul",
effect:"leftLoop",
autoPage:true,//自动分页
autoPlay:true //自动播放
})
<div id="slideBox" class="slideBox">
<div class="bd">
<ul>
<li>
<a class="pic" href="#"><img src="${ctxStatic}/img/mobile/news1.png" /></a>
<a class="tit" href="#">墨西哥教师罢工 与警察激烈冲突</a>
</li>
<li>
<a class="pic" href="#"><img src="${ctxStatic}/img/mobile/news2.jpg"/></a>
<a class="tit" href="#">日右翼游行纪念钓岛"国有化"周年</a>
</li>
<li>
<a class="pic" href="#"><img src="${ctxStatic}/img/mobile/news3.jpg"/></a>
<a class="tit" href="#">女兵竞选美国小姐鼓励女性自强</a>
</li>
<li>
<a class="pic" href="#"><img src="${ctxStatic}/img/mobile/news4.jpg"/></a>
<a class="tit" href="#">济南现“最窄人行道” 仅0.2米宽</a>
</li>
</ul>
</div>
<div class="myhd">
<ul style="height: 28px"></ul>
</div>
</div>