看到的那个背景图片其实是一个div（bgIn）里面嵌套了两个子div(bg-1和bg-2)，两个子div只是设置了宽，背景图片，它们横向左对齐排列。然后控制父div(bgIn)的left属性，让这个div(bgIn)相对于它的父div(bg)中左右移动而已。你用chrome的审查元素就能看到的。
最外边那个div(bg)则主要是控制z轴，让它显示在页面下面
而这些设置好之后，用jquery的toggle()函数和animate()函数简单的控制一下bgIn的left属性和过渡时间就能实现了。
<div class="bg-list p-a" id="bg"><div class="bg-in p-a" id="bgIn" style="left: -1349px;">
<div class="bg-1" style="width: 1349px;"></div>
<div class="bg-2" style="width: 1349px;"></div>
</div>
</div>
.bg-list{ top:0; left:0; overflow:hidden; width:100%; height:100%; z-index:10;}
.bg-in{height:100%;top:0; left:0; width:20000px;}
.bg-in div{ height:826px; float:left;background-repeat:no-repeat; background-position:center top;}
.bg-1{ background-image:url(http://ossweb-img.qq.com/images/codo/201304/index_bg_1.jpg);}
.bg-2{ background-image:url(http://ossweb-img.qq.com/images/codo/201304/index_bg_2.jpg);}
温馨提示：内容为网友见解，仅供参考
第1个回答 推荐于2016-06-10
这个有挺多的表现形式，好理解的就是
例如5张图的：
你的窗口大小：
口
5张图片大小：
口 口 口 口 口
默认看，是一张图，其他4张在右边没显示出来，用jquery把第一张的margin-left修改为宽度的负值，例如图片宽度是960px，那么用 $('img1').animate({'margin-left': '-960px'}, 500)，500毫秒的过度动画将图片过度到左侧-960px位置，那么第二张图就出来了，这就成了动画。
其他方式有更多表现形式，例如覆盖型：
窗口：
口
图片形式：
口
口
口
口
口
一张盖一张，第一张有消失的动画，并放到序列最后，则第二张展现。
再有就更复杂了，你可以找现成的插件直接用。追答
例如5张图的：
你的窗口大小：
口
5张图片大小：
口 口 口 口 口
默认看，是一张图，其他4张在右边没显示出来，用jquery把第一张的margin-left修改为宽度的负值，例如图片宽度是960px，那么用 $('img1').animate({'margin-left': '-960px'}, 500)，500毫秒的过度动画将图片过度到左侧-960px位置，那么第二张图就出来了，这就成了动画。
其他方式有更多表现形式，例如覆盖型：
窗口：
口
图片形式：
口
口
口
口
口
一张盖一张，第一张有消失的动画，并放到序列最后，则第二张展现。
再有就更复杂了，你可以找现成的插件直接用。追答
这种效果其实就是在幻灯片层上用绝对定位覆盖上一个层，如果你用过photoshop图层或flash图层，就会理解。
下面的幻灯片正常运转着，上面的代码自行定义，搭配起来，就是整个页面效果了。
相似回答
