<!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
化龙贝