滑动布局margin-left

在不用定位情况下完成图片轮播布局，主要思路margin-left

第一个框定义需要显示内容的大小

第二个框定义所有内容的大小，如不确定宽度大小可以用js获得img下标和宽度进行计算

定义图片大小，左浮动，用display：inline-block这个在链接的边缘会有留白，看需求选择

.on-one{width:300px;overflow:hidden;}

.on-two{width:1200px;margin-left:0;}

.on-two img{width:100px;display:block;float:left;}

<div class="on-one">

<div class="on-two" id="two">

<img src=" http://img2.3lian.com/2014/f4/199/d/49.jpg">

<img src=" http://img2.3lian.com/2014/f4/199/d/49.jpg">

<img src=" http://img2.3lian.com/2014/f4/199/d/49.jpg">

<img src=" http://img2.3lian.com/2014/f4/199/d/49.jpg">

<img src=" http://img2.3lian.com/2014/f4/199/d/49.jpg">

<img src=" http://img2.3lian.com/2014/f4/199/d/49.jpg">

</div>

</div>

var two=document.getElementById("two");

var img=two.getElementsByTagName("img");

//计算two宽度总和

var twoWidth=img.length*img.offsetWidth;

two.style.width=twoWidth+'px';

var time=0;

two.innerHTML+=two.innerHTML;

setInterval(function(){

var getTime=time+5;

if(getTime > twoWindth/2){

two.marginLeft='0';

}else{

two.marginLeft=getTime+'px'

}

},100);