<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<style type="text/css">
.banner{ width: 2400px; height: 300px;}
.ban01{ width: 800px; height: 300px; background: red; float: left;}
.ban02{ width: 800px; height: 300px; background: blue;float: left;}
.ban03{ width: 800px; height: 300px; background: gold;float: left;}
.ban00{width: 800px; height: 300px; overflow: hidden; margin:0 auto;}
</style>
<div class="ban00">
<div class="banner">
<div class="ban01 ban99"></div>
<div class="ban02 ban99"></div>
<div class="ban03 ban99"></div>
</div>
</div>
<script src="jquery-2.1.min.js"></script>
<script>
var i = 1;
function banner01() {
if (i >2 ) {
i = -1;
}
$(".ban99").eq(i).siblings().animate({ width:"0px", heigth:"0px", opacity:"1" },1000);
$(".ban99").eq(i+1).animate({ width:"800px", heigth:"300px", opacity:"1" },1000);
i++;
}
setInterval(banner01,3000);
</script>
</body>
</html>
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
