html图片重叠轮播,HTML5--图片轮播多张展示

图片轮播，多张效果：

HTML5--图片轮播

html,body{

padding:0px;

margin:10px auto;

}

#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:2240px;

position:absolute;

}

#inner div{

width:270px;

height:150px;

background:#555;

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;

}

$(function(){

var curNum=0;

var count=$("#inner").children('div').length;

//左滑动

$(".btnleft").click(function(){

//如果到了最后一个元素 停止

if((count-curNum)<=4){

return false;

}

//

curNum+=1;

$("#inner").animate({

left:'-=280'

},500,function(){

//curNum+=1; //写在这里 如果快速点击 这句没有执行 应经开始执行第二次了

});

});

//右滑动

$(".btnright").click(function(){

//如果到了第一个元素 停止

if(curNum<=0){

return false;

}

//

curNum-=1;

$("#inner").animate({

left:'+=280'

},500,function(){

//curNum-=1; //写在这里同样问题

});

});

});

1

2

3

4

5

6

7

8

«

»