效果图

HTML代码

    
             
     
     
    
      
        
       
1
        
       
2
        
       
3
        
       
4
        
       
5
        
       
6
    
      
    
      
       <
      
    
      
       >
      
     

jQuery代码

CSS代码

ul,li{padding: 0;margin: 0; list-style: none;}.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "微软雅黑"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}.arrowLeft,.arrowRight{    position: absolute;    width: 30px;    background:rgba(0,0,0,0.2);    height: 50px;    line-height: 50px;    text-align: center;    top:200px;    z-index: 150;    font-family: "微软雅黑";    font-size: 28px;    font-weight: bold;    cursor: pointer;    display: none;}.arrowLeft{left: 10px;}.arrowRight{right: 10px;}li:nth-of-type(1){    background: orange;}