<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="明威">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<title>sdhfsdf</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var _index=0;//序列号
$(".But span").click(function(){
$(this).addClass("active").siblings("span").removeClass("active");_index=$(this).index();
$(".scroll").animate({left:_index*-980},500);
});
</script>
<style type="text/css">
*{margin:0px;}
#flash{width:100%;height:457px; background:url("images/bg.jpg"); padding-top:35px;}
#flash .Con{width:980px; height:420px; background:#ff3333; margin:0px auto; position:relative;/*相对定位*/ overflow:hidden;/*超出隐藏*/}
#flash .Con .scroll{width:9999px;height:420px; position:absolute;/*绝对定位*/ left:-0px;}
#flash .scroll img{float:left;}
#flash .Con .But{width:100%; height:30px; position:absolute; bottom:0px; text-align:center;}
#flash .Con .But span{width:16px;height:16px; display:inline-block;/*行间块*/ background:url("images/but1.png") no-repeat center; margin:0px 3px;}
#flash .Con .But span.active{background-image:url("images/but2.png");}
</style>
</head>
<body>
<div id="flash">
<div>
<!--滚动区-->
<div>
<img src="images/flash1.jpg"/>
<img src="images/flash2.jpg"/>
<img src="images/flash3.jpg"/>
<img src="images/flash4.jpg"/>
<img src="images/flash5.jpg"/>
<img src="images/flash6.jpg"/>
</div>
<!--按钮-->
<div>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
</body>
</html>vippiv
化龙贝