本文实例讲述了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; } */
最后改造完毕
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
