HTML5--图片轮播多张展示
2016-09-29 本文已影响2087人
圆梦人生
来源：http://itssh.cn/post/899.html
图片轮播，多张效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5--图片轮播</title>
<!--
@author:SM
@email:sm0210@qq.com
@desc:图片轮播多张展示
-->
<style type="text/css">
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;
}
</style>
<script language="javascript" src="jquery-1.7.2.js"></script>
<script language="javascript">
$(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; //写在这里同样问题
});
});
});
</script>
</head>
<body>
<div id="main">
<div id="warpper">
<div id="inner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</div>
<br />
<br />
<div id="optrbtn">
<span class="btnleft">«</span>
<span class="btnright">»</span>
</div>
</body>
</html>
