首先，引入jquery.mobile.js文件，页面里有两个<div data-role="page">这样： ```html //第一页面 <div data-role="page" id="index"> <div data-role="content"> <ul data-role="listview" id="circle-news-list"> <!-- 第一个列表 --> </ul> </div> </div> //第二页面 <div data-role="page" id="class-page"> <div data-role="content"> <ul data-role="listview" id="class-news-list"> <!-- 第二个列表 --> </ul> </div> </div> ``` 接下来通过jquery mobile 中的swipe事件还执行左右滑动效果： ```javascript <script> $(function() { $("#circle-news-list").bind("swipeleft",function() { $.mobile.changePage("#class-page"); }); $("#class-news-list").bind("swiperight",function() { $.mobile.changePage("#index", {transition:"slide",reverse:true}, true, true); }); }); </script> ``` 这里，从左往右比较容易，默认的slide就可以了，从右往左是关键，默认的切换效果还是会从左往右，所以要加上reverse:true,这样就可以实现左右切换了。 详情请查看: http://designicu.com/jquery-mobile-swipe/
