* { margin:0; padding:0; list-style:none; } /* */ .slider { height:300px; width:500px; margin:100px auto; position:relative; } .slider .fade li { position:absolute; display:none; } .slider .fade li:first-child { display:block; } .arrow { display:none; } .slider:hover .arrow { display:block; } .arrow-left,.arrow-right { font-family:"SimSun","宋体"; width:30px; height:60px; background-color:rgba(0,0,0,0.1); position:absolute; top:50%; margin-top:-30px; cursor:pointer; text-align:center; line-height:60px; color:#fff; font-weight:700; font-size:30px; } .arrow-left:hover,.arrow-right:hover { background-color:rgba(0,0,0,.5); } .arrow-left { left:0; } .arrow-right { right:0; } .slider .pagination { position:absolute; bottom:10px; left:50%; margin-left:-68px } .slider .pagination ul li { font-size:8px; line-height:16px; float:left; margin-right:5px; width:16px; height:16px; border-radius:50%; background-color:gray; text-align:center; cursor:pointer } .slider .pagination ul li.active { background-color:red; }
左右箭头用字体图标,快速点击就不会出现局部蓝方块了