简单图片banner轮播_html/css_WEB-ITnose

/**************【css】****************/

　　 

　　　　　.banner{width:100%;height:300px;background:rgb(63,12,9);position:relative;}
        　　.cont{width:760px;height:300px;margin:0px auto;background:#cc9999;position:relative;}
        　　.cont ul li{list-style-type:none;width:760px;height:300px;position:absolute;top:0px;left:0px;display:none;}
        　　.cont .prev{width:50px;height:55px;position:absolute;top:100px; left:0px;background:url("images1/button-prev-next.png");background-position:60px -140px;display:none;cursor:pointer;}
        　　.cont .next{width:50px;height:55px;position:absolute;top:100px; right:0px;background:url("images1/button-prev-next.png");background-position:-60px -140px;display:none;cursor:pointer;}
       　　 .motbig{width:175px;height:17px;position:absolute;bottom:10px;left:0px;right:0px;margin:0px auto;list-style-type:none;}
       　　 .motbig ul li{list-style-type:none;width:12px;height:12px;border:1px #ffffff solid;float:left;margin:1px 5px;border-radius:50%;cursor:pointer;}
       　　 .motbig ul li.hover{background:#fff;}
    　

 

/*****************************/

/************【布局】*************/

       

           

               
• 
                     
                 

               
• 
                     
                 

               
• 
                     
                 

               
• 
                     
                 

               
• 
                     
                 

               
• 
                     
                 

               
• 
                     
                 

           

           

           

       

       

           

               
• 
                 
• 
                 
• 
                 
• 
                 
• 
                 
• 
                 
• 
             

       

   

/*******************************************/

/************【js】*******************/

/*****************************/

效果：