HTML5--图片轮播单张展示
2016-09-29 本文已影响373人
圆梦人生
来源：http://itssh.cn/post/900.html
图片轮播，单张效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片轮播效果</title>
<!--
@author:SM
@email:sm0210@qq.com
@desc:图片轮播单张展示
-->
<style type="text/css">
html,body{
padding:0px;
margin:10px auto;
}
#wrapper{
width:210px;
height:100px;
position:relative;
overflow:hidden;
margin:0 auto;
}
#inner{
width:630px;
position:absolute;
}
#inner div{
width:200px;
height:100px;
margin:0 5px;
background:#ccc;
float:left;
}
.full-circle{
background:#ccc;
border-radius:5px;
width:10px;
height:10px;
float:left;
margin:5px;
}
.cur{
background-color:#555;
}
#btns{
width:60px;
margin:0 auto;
}
#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(curNum>=count-1){
return false;
}
curNum+=1;
$("#inner").animate({
left:'-=210'
},500,function(){
//curNum+=1;
$(".full-circle").removeClass('cur');
$(".full-circle").eq(curNum).addClass('cur');
});
});
//右滑动
$(".btnright").click(function(){
if(curNum<=0){
return false;
}
curNum-=1;
$("#inner").animate({
left:'+=210'
},500,function(){
//curNum-=1;
$(".full-circle").removeClass('cur');
$(".full-circle").eq(curNum).addClass('cur');
});
});
});
</script>
<!--
原理:
向左切换时减去一个图片DIV宽度距离
向右切换时加上一个图片DIV距离
-->
</head>
<body>
<div id="main">
<div id="wrapper">
<div id="inner">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<div id="btns">
<div class="full-circle cur"></div>
<div class="full-circle"></div>
<div class="full-circle"></div>
</div>
</div>
<br>
<br>
<div id="optrbtn">
<span class="btnleft">«</span>
<span class="btnright">»</span>
</div>
</body>
</html>
