一组banner上面有几个小图片，点击上一张下一张时一组banner上的小图片一张一张向左消失怎么实现？

Question

图片banner焦点图前端

Answer 1

说实话没太看懂……是说图中红色边框的小图逐张的向左移动直至移出视线吗？
下面这个样子？<div id="banner">
<div style="position:relative; top:10; left:300"><img src="http://www.baidu.com/img/bdlogo.gif"></div>
<div style="position:relative; top:-30; left:200"><img src="http://info-database.csdn.net/Upload/2014-04-14/saifunai-210-60-20140414.gif"></div>
<div style="position:relative; top:-70; left:500"><img src="http://avatar.csdn.net/D/5/2/1_dujunyan3344.jpg"></div>
  </div>
  <INPUT TYPE="button" VALUE="下一张" ONCLICK="fun(0)">
var ban = document.getElementById("banner");
var i=0;
function fun(i) {
timer = window.setInterval( "change(ban.childNodes["+i+"])", 1 );
}
function change(obj) {
//若div移动到超出所包含图片的宽度，停止定时执行
if ( parseInt(obj.style.left) <= 0 -  parseInt(obj.childNodes[0].offsetWidth)) 
{
window.clearInterval(timer);
if (i<ban.childNodes.length) {
fun(i++); //下一个div开始移动
}
}
//设置div位置，每次向左移动5像素
obj.style.left = parseInt(obj.style.left) -5;
}

Answer 2

触发翻页的时候，给可以移动的图片写一个类似于disappear(){}这样的function，然后传个参进去决定方向不就行了吗？