js代码:
var curNum=0;
var count=$("#inner").children('div').length;//8
setInterval("test()",5000);
function test(){
//如果到了最后一个元素,停止
if((count-curNum)<=7){
curNum=0;
$("#inner").css("left","0");
test();
// return false;
}
curNum+=1;
$("#inner").animate({
// 每次点击都从左边裁剪280像素
left:'-=280'
},100);
}
$(function(){
//左滑动
$(".btnleft").click(function(){
//如果到了最后一个元素,停止
if((count-curNum)<=4){
return false;
}
curNum+=1;
$("#inner").animate({
// 每次点击都从左边裁剪280像素
left:'-=280'
},500);
});
//右滑动
$(".btnright").click(function(){
//如果到了第一个元素,停止
if(curNum<=0){
return false;
}
curNum-=1;
$("#inner").animate({
// 每次点击都从左边补充280像素
left:'+=280'
},500);
});
});
css代码:
#warpper {
width: 1120px; /*一列展示几个的宽度 ,4*280 动态算*/
height: 150px;
margin: 0 auto;
position: relative;
overflow: hidden;
border: 1px solid red;
}
#inner {
/*元素个数*280(div宽度) 动态算 1120px[4个元素] 1440px[5个元素] 1680px[6个元素] 2240px[8个元素]
用JS动态设置改值
*/
width: 2520px;
position: absolute;
}
#inner div {
width: 270px;
height: 150px;
/*使用浮动元素排列*/
float: left;
margin: 0 5px;
}
#optrbtn {
text-align: center;
font-size: 20px;
}
#optrbtn span {
display: inline-table;
border: 1px solid red;
width: 50px;
cursor: pointer;
margin-right: 5px;
}
#inner div img {
width: 100%;
height: 100%;
}
html代码:
<div id="main">
<div id="warpper">
<div id="inner">
<div><img src="../images/add_img.png"/></div>
<div><img src="../images/add.png"/></div>
<div><img src="../images/addressRenewal1.png"/></div>
<div><img src="../images/addressRenewal3.png"/></div>
<div><img src="../images/addressRenewal4.png"/></div>
<div><img src="../images/android.png"/></div>
<div><img src="../images/app_download.png"/></div>
<div><img src="../images/beian.png"/></div>
<div><img src="../images/biangeng.png"/></div>
<div><img src="../images/add_img.png"/></div>
<div><img src="../images/add.png"/></div>
<div><img src="../images/addressRenewal1.png"/></div>
</div>
</div>
</div>
<br /> <br />
<div id="optrbtn">
<span class="btnleft">«</span> <span class="btnright">»</span>
</div>