jquery手机触屏左右滑动切换栏目怎么做

Posted 2023-04-18

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> 参考技术A http://blog.csdn.net/x2145637/article/details/47721813 参考技术B 现在主流用swiper这个插件 你去下个，按照文档使用

H5页面切换，左右滑动和上下滑动，哪种好？

左右滑动和上下滑动都是交互的形式，使用哪一种主要看应用的具体场景。
当然，也有一些需要普遍注意的地方，如：
1、苹果手机上，向右滑动容易触发返回上一级页面。所以为了交互体验，要慎用向右滑动的操作方式。
2、设置向上滑动翻页时，指引箭头应该向上而不是向下；如果是点击翻页，则用向下的箭头。
3、功能按钮等尽量远离页面的底部，以便更好地适配各种类型、各种大小的手机，防止按钮被挡住。 参考技术A 左右滑动和上下滑动都是交互的形式，使用哪一种主要看应用的具体场景。
当然，也有一些需要普遍注意的地方，如：
1、苹果手机上，向右滑动容易触发返回上一级页面。所以为了交互体验，要慎用向右滑动的操作方式。
2、设置向上滑动翻页时，指引箭头应该向上而不是向下；如果是点击翻页，则用向下的箭头。
3、功能按钮等尽量远离页面的底部，以便更好地适配各种类型、各种大小的手机，防止按钮被挡住。