先上效果图:
由于动态图太大,所以只能截屏了;大致效果,图片轮播的过程中,底下的灰色提示渐渐出现;
现在来说实现思路:
HTML部分:
<div id="content"> <img id="img1" /> <img id="img2" /> <div id="intro"> <span></span> </div> </div>
CSS部分:
img,div,ul,li { margin:0;padding:0;} #content { margin:100px auto 0 auto;width:600px; height:400px; border:1px solid #F00; position:relative;overflow:hidden;} #img1 { position:absolute;top:0;left:0;} #img2 { position:absolute;top:0;left:600px;} #intro { width:600px; height:60px; position:absolute; top:340px; left:0