jquery投影片外掛程式bxslider樣式改進實例_jquery

本文實例講述了jquery投影片外掛程式bxslider樣式改進方法，分享給大家供大家參考。具體如下：

對比了很多jquery的幻燈片，都覺得不是很好，最後發現bxslider相容性最好，行動裝置支援手動翻動。

但是官方提供的顯示效果真的很難看，讓人難以接受。最後只能自己DIY了。

bxslider官方樣式如下：

 

改造後的樣式如下：

第一步：引入bxslider

複製程式碼 程式碼如下:

 
 
 
 

第二步：加入bxslider html程式碼

複製程式碼 程式碼如下:

 

 
       

  
            

• 
  
            
       

  
       

  
            
          {$i}  
            
       

  
   

 

 

  

• 

  
 

 

  
   {$i}
  
 

原版官方的html代碼是這樣的：

複製程式碼

程式碼如下:

  
 
• 
  
 
• 
  
 
• 
  
 
• 
  

 

 
• 

 
• 

 
• 

 
• 

在此基礎上建立了一個slider_block的父層DIV，設定position為relative，主要是為子層slider-pager的絕對定位翻頁「1，2，3」。

第三步：修改CSS jquery.bxslider.css，增加slider-pager的CSS樣式最佳化

複製程式碼 程式碼如下:

#slider_block{position: relative;margin: 0 auto;height: 245px;margin-top:10px;overflow:hidden;}  
#slider-pager{position: absolute;bottom: 10px;right: 10px;z-index: 999;font-size: 0px;}  
#slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;background: #FC0color: #930; }  
#slider-pager .active {background: #0C3;color: #fff;}  
 
/*去除陰影效果，瀏覽器不相容 by 4jcms */  
/*.bx-wrapper .bx-viewport {  
    -moz-box-shadow: 0 0 5px #ccc;  
    -webkit-box-shadow: 0 0 5px #ccc;  
    box-shadow: 0 0 5px #ccc;  
    border: solid #fff 5px;  
    left: -5px;  
    background: #fff;  
}  
 
*/ 
#slider_block{position: relative;margin: 0 auto;height: 245px;margin-top:10px;overflow:hidden;}
#slider-pager{position: absolute;bottom: 10px;right: 10px;z-index: 999;font-size: 0px;}
#slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;background: #FC0color: #930; }
#slider-pager .active {background: #0C3;color: #fff;}

/*去除陰影效果，瀏覽器不相容 by 4jcms */
/*.bx-wrapper .bx-viewport {
 -moz-box-shadow: 0 0 5px #ccc;
 -webkit-box-shadow: 0 0 5px #ccc;
 box-shadow: 0 0 5px #ccc;
 border: solid #fff 5px;
 left: -5px;
 background: #fff;
}
*/

最後改造完畢