本文实例讲述了jquery幻灯片插件bxslider样式改进方法，分享给大家供大家参考。具体如下：
对比了很多jquery的幻灯片，都觉得不是很好，最后发现bxslider兼容性最好，移动设备支持手动翻动。
但是官方提供的显示效果真的很难看，让人难以接受。最后只能自己DIY了。
bxslider官方样式如下：
改造后的样式如下：
第一步：引入bxslider
代码如下:
第二步：加入bxslider HTML代码
代码如下:
本文实例讲述了jquery幻灯片插件bxslider样式改进方法，分享给大家供大家参考。具体如下：
对比了很多jquery的幻灯片，都觉得不是很好，最后发现bxslider兼容性最好，移动设备支持手动翻动。
但是官方提供的显示效果真的很难看，让人难以接受。最后只能自己DIY了。
bxslider官方样式如下：
改造后的样式如下：
第一步：引入bxslider
第二步：加入bxslider HTML代码
原版官方的html代码是这样的：
在此基础上创建了一个slider_block的父层DIV，设置position为relative，主要是为子层slider-pager的绝对定位翻页“1，2，3”。
第三步：修改CSS jquery.bxslider.css，增加slider-pager的CSS样式优化
/去掉阴影效果，浏览器不兼容 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;
}
*/
/*去掉阴影效果，浏览器不兼容 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; } */
最后改造完毕
