怎么用js实现类似手机切屏的左右滑动的效果

JavaScript021

怎么用js实现类似手机切屏的左右滑动的效果,第1张

这是自己封装的原生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>