banner轮播图片的设计【jquery】
。。
。。
。。
只是展示jquery如何做出banner轮转，细节处为做好。
完整的例子可参看本博客 banner轮播图片的设计【纯js】
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" >
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" >
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script>
window.setInterval(roll, 1000);
var cnt = 0;
function roll()
{
if(cnt==0)
$(".banner_content").animate({left:"-100%"});
else if(cnt==1)
$(".banner_content").animate({left:"-200%"});
else if(cnt==2)
$(".banner_content").animate({left:"-300%"});
else if(cnt==3)
$(".banner_content").animate({left:"0%"});
cnt++;
if(cnt>=4)
cnt = 0;
}
</script>
<style type="text/css">
.banner_holder{
height:200px;
width:600px;
overflow:hidden;
position:relative;
margin:auto;
}
.banner_content{
height:200px;
width:400%;
position:absolute;
}
img{
float:left;
}
</style>
<title>Home Page</title>
</head>
<body>
<div class="banner_holder">
<div class="banner_content">
<img src="http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg" height="200px" width="25%" id="banner_img1" />
<img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/w800h521/20171212/kwEX-fypnsip9310109.jpg" height="200px" width="25%" id="banner_img2" />
<img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/w800h517/20171212/VBAU-fypnsip9310475.jpg" height="200px" width="25%" id="banner_img3" />
<img src="http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg" height="200px" width="25%" id="banner_img4" />
</div>
</div>
</body>
</html>
。。。
。。
