HTML5--图片轮播多张展示

图片轮播，多张效果：
<!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>
来源：http://itssh.cn/post/899.html
HTML5--图片轮播多张展示

推荐阅读更多精彩内容
