.head-bottom { width:1000px; height:500px; margin:10px auto; overflow:hidden; position:relative } /*幻灯片区域*/ .head-bottom-img { position:relative; width:10000px; height:500px; overflow:hidden; } .head-bottom .head-bottom-img ul { list-style:none; } .head-bottom .head-bottom-img ul li { display:block; width:1000px; height:500px; position:absolute; top:0; left:0; } .head-bottom .head-bottom-img>ul>li>a img { width:1000px; height:500px; } .head-bottom .smallimg { width:982px; height:45px; padding:10px 9px; position:absolute; background:#2a2223; bottom:-80px; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; } /*兼容性的透明度*/ .head-bottom .smallimg ul li { display:block; width:90px; height:45px; float:left; cursor:pointer; } .head-bottom .smallimg img { width:90px; height:45px; } .head-bottom .smallimg-imgg img { box-sizing:border-box; border:2px solid #eb6877; } /*hover时图片出现朝内边框*/ .head-3 { width:0px; height:0px; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #2f2f2f; font-size:0px; line-height:0px; position:absolute; top:-10px; left:40px; } /*三角形*/
每个li标签的css都是绝对定位,定时器时间一到li的定位改变,很简单就能实现