首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery bxslider幻灯片式样改造

2013-11-18 
jquery bxslider幻灯片样式改造?改造后的样式:??第一步:引入bxslider?第二步:加入bxslider html代码??在此

jquery bxslider幻灯片样式改造

?

改造后的样式:


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;}*/

?

最后改造完毕。。。

热点排行