解决办法其实很简单，采用AJAX刷新、CSS切换。这里还需要注意的是，只有在WebKit浏览器上能看到效果。(用PhoneGap做了一个测试应用，可以在Android和IOS系统上运行，所以只需要WebKit的兼容性。)
1、首先，看看对body标签的css样式，让它有动画效果：
2、接下来，给超链接添加点击事件，让它产生切换效果。
3、下一步是使用AJAX获取到链接页面
4、要达到切换效果，还需要以下步骤:
a.
滑动当前页面到屏幕左侧；
b.
瞬间移动当前页面到屏幕右侧；
c.
替换body里面的内容；
d.
从屏幕右侧滑入当前页面对。
5、必须要遵循上面的步骤，不然不能达到预期的效果。
现在说一下详细步骤：
a.移动body到屏幕的左侧
b.写个移动监听事件
c.切换过程中，用户可能会点击后退按钮，还需对此进行处理：
总结：基本的思路就这些，当然在实际操作过程中还有一些细节需要注意，这里就不详细说了，都在代码里能体现出来
完全可以，用css的重复播放动画的功能实现自动切换。
做了个小例子，你可以看看，基本的思路就这样了，效果还比较不错啦。这个思路还可以用来作为图片滚动播放的例子呢。
body部分代码：
<body>
<div id="box1">
<div id="box2">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
</div>
</body>
css的代码：
*{
padding:0
margin:0
}
html,body{
overflow-x:hidden
overflow-y:auto
}
#box1{
position:relative
width:500px
height:450px
margin:0 auto
background:red
overflow:hidden
}
#box2{
float:left
width:2000px
height:450px
animation:box2 2s both linear infinite
-webkit-animation:box2 2s both linear infinite/* Safari and Chrome */
}
#box2:hover {
animation-play-state: paused
}
@keyframes box2
{
from {
margin-left:0
}
to {
margin-left:-1500px
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
margin-left:0
}
to {
margin-left:-1500px
}
}
img{
float:left
width:500px
height:450px
}
效果图；
好像时间间隔设置太短了，可以把动画播放的时间延长一点。
