* { margin:0; padding:0; } .container { position:relative; margin:100px auto; /* 设置图片的宽高(和图片一致则不用再同步图片宽高) */ width:500px; height:500px; border:1px solid yellow; /*边框可去除*/ overflow:hidden; } .container img { /* 设置图片的宽高(和图片一致只设置上面) */ } .container a { display:none; } /* 当前正显示图片 */ .container a.current { display:block; } .container ul { position:absolute; top:95%; left:50%; margin:-40px; /* ul的一半宽度,便于居中 */ list-style:none; } .container li { float:left; width:10px; height:10px; margin-right:10px; background-color:#fff; border-radius:50%; } .container li.current { background-color:#00f; opacity:0.5; /*兼容IE8-*/ filter:alpha(opacity=50); } .left,.right { position:absolute; font-size:30px; padding:0px 5px; top:50%; margin-top:-20px; color:#fff; background-color:#222; opacity:0; /*兼容IE8-*/ filter:alpha(opacity=50); } .left:hover,.right:hover,.container li { cursor:pointer; } .right { right:0px; }
设置图片的宽高(和图片像素一致只设置.container类中的宽高);若需要修改图片宽高(不为默认的则需要同时设置.container img和.container的宽高一致),兼容ie8及以下,其他的js代码有明确注释