首頁 > web前端 > js教程 > jquery投影片外掛程式bxslider樣式改進實例_jquery

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

WBOY
發布: 2016-05-16 16:33:56
原創
1356 人瀏覽過

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

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

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

bxslider官方樣式如下:

 

改造後的樣式如下:

第一步:引入bxslider

複製程式碼 程式碼如下:
 
 
 
 






第二步:加入bxslider html程式碼

複製程式碼 程式碼如下:
 

 
       
      
                
  • jquery投影片外掛程式bxslider樣式改進實例_jquery
  •   
             
      
           
  
       
  
            
          {$i}  
         
  
       
  
   
 

 

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

  •   

     

 

  
   {$i}
  

 

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

程式碼如下:
      
     
  • jquery投影片外掛程式bxslider樣式改進實例_jquery
  •   
     
  • jquery投影片外掛程式bxslider樣式改進實例_jquery
  •   
     
  • jquery投影片外掛程式bxslider樣式改進實例_jquery
  •   
     
  • jquery投影片外掛程式bxslider樣式改進實例_jquery
  •   
 

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

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

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

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

在此基礎上建立了一個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;
}
*/

最後改造完畢

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板