* { padding:0px; margin:0px; } a { text-decoration:none; } ul { list-style:outside none none; } .slider,.slider-panel img,.slider-extra { width:650px; height:413px; } .slider { text-align:center; margin:30px auto; position:relative; } .slider-panel,.slider-nav,.slider-pre,.slider-next { position:absolute; z-index:8; } .slider-panel { position:absolute; } .slider-panel img { border:none; } .slider-extra { position:relative; } .slider-nav { margin-left:-51px; position:absolute; left:50%; bottom:4px; } .slider-nav li { background:#3e3e3e; border-radius:50%; color:#fff; cursor:pointer; margin:0 2px; overflow:hidden; text-align:center; display:inline-block; height:18px; line-height:18px; width:18px; } .slider-nav .slider-item-selected { background:blue; } .slider-page a { background:rgba(0,0,0,0.2); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color:#fff; text-align:center; display:block; font-family:"simsun"; font-size:22px; width:28px; height:62px; line-height:62px; margin-top:-31px; position:absolute; top:50%; } .slider-page a:HOVER { background:rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left:100%; margin-left:-28px; }
图片用的是占位符,更改成你需要的图片即可,这就是最简单的手写轮播图的方法,希望大家能够学会