SuperSlide插件轮播图

(前途需要引入插件所需js)

1. html

                      
                                           

                                                

                                                    

                                                    

                                                    

                                                  

                                                  

                                                
                                                

                                                

                                                    

                                                        
111111111111
                                                        
222222222222
                                                        
333333333333
                                                      
333333333333
                                                      
333333333333
                                                    
                                                
                                                

                                                    
1
                                                    
2
                                                    
3
                                                  
4
                                                  
5
                                                
                                            
                                            
                     					 

2. css

/*轮播图*/
.focusBox{position: relative;width: 435px;height: 250px;/*当页面加载完之后，不会出现混乱的现香*/overflow: hidden;}
/*遮罩*/
.focusBox .txt-bg{position: absolute; bottom: 0;
  z-index: 1;height: 36px; width: 100%;background:url(../images/btm.png) no-repeat center;opacity: 0.4;overflow: hidden;}
/*标题*/
.focusBox .txt { position: absolute; bottom: 0; z-index: 2; height: 36px; width:100%; overflow: hidden; }
.focusBox .txt li{ height:36px; line-height:36px; position:absolute; bottom:-36px;}
.focusBox .txt li a{ display: block; color: white; padding: 0 0 0 10px; font-size: 16px; font-weight: bold;
  text-decoration: none; }
/*小按钮*/
.focusBox .num { position: absolute; z-index: 3; bottom: 8px; right: 8px; }

.focusBox .num li{ float: left; position: relative; width:20px;height:20px;  overflow: hidden; 
  text-align: center; margin-right: 1px; cursor: pointer;}
.focusBox .num li a{ position: absolute; 
  z-index: 2; display: block; color: white; font-size:0;width: 100%; height: 100%; 
  top: 0; left: 0; text-decoration: none;background:url(../images/bai.png) no-repeat center }
.focusBox .num li span { display:none }
.focusBox .num li.on a{ background:url(../images/lan.png) no-repeat center }

3. 效果图
   
   4.所需材料 （半透明图片、白色圆点和蓝色圆点）