jquery bxslider幻灯片样式改造
?
改造后的样式:
?
?第一步:引入bxslider
?
第二步:加入bxslider html代码
?
?
在此基础上创建了一个slider_block的父层DIV,设置position为relative,主要是为子层slider-pager的绝对定位翻页“1,2,3”。
?
第三步:修改CSS?jquery.bxslider.css,增加slider-pager的CSS样式优化
/** custorm by 企业网站CMS系统:www.4jcms.com **/#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: #FC0;color: #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;}*/?
最后改造完毕。。。