jquery幻灯片插件bxslider样式改进实例

本文实例讲述了jquery幻灯片插件bxslider样式改进方法，分享给大家供大家参考。具体如下：

对比了很多jquery的幻灯片，都觉得不是很好，最后发现bxslider兼容性最好，移动设备支持手动翻动。

但是官方提供的显示效果真的很难看，让人难以接受。最后只能自己自己动手了。

bxslider官方样式如下：

改造后的样式如下：

第一步：引入bxslider

复制代码代码如下：- jQuery库（由谷歌提供)-脚本src=' http://Ajax。谷歌API。com/Ajax/libs/jQuery/1。8 .2/jQuery。量滴js /脚本！- bxSlider Javascript文件-script src=' http :/js/jquery。bxSlider。量滴js '/脚本！- bxSlider CSS文件-link href='/lib/jquery。bxSlider。CSS ' rel='样式表'/!- jQuery库（由谷歌提供)-脚本src=' http://Ajax。谷歌API。com/Ajax/libs/jQuery/1。8 .2/jQuery。量滴js /脚本！- bxSlider Javascript文件-script src=' http :/js/jquery。bxSlider。量滴js '/脚本！- bxSlider CSS文件-link href='/lib/jquery。bxSlider。CSS ' rel='样式表'/

第二步：加入bxslider html代码

复制代码代码如下： div id=' slider _ block ' ul class=' bxslider ' foreach name=' slide list ' item=' obj ' lia href=' { $ obj。link _ addr } ' target=' _ blank ' img src=' http : _ _ APP _ _ { $ obj。slide _ img _ addr } ' width=' 990 ' height=' 245 '/a/Li/foreach/ul div id=' slider-pager ' foreach name=' slide list ' item='

原版官方的超文本标记语言代码是这样的：

复制代码代码如下：ul类=' bxslider ' liimg src=' http :/images/pic1。jpg '/Li liimg src=' http :/images/pic2。jpg '/Li liimg src=' http :/images/pic3。jpg '/Li liimg src=' http :/images/pic4。jpg '/Li/ul类=' bxslider ' liimg src

在此基础上创建了一个滑块的父层DIV，设置位置为相对的，主要是为子层滑动寻呼机的绝对定位翻页"1,2,3"。

第三步：修改CSS jquery.bxslider.css，增加滑动寻呼机的半铸钢钢性铸铁(铸造半钢)样式优化

复制代码代码如下： #滑块{位置：相对；margin: 0自动高度： 245像素；页边距-top :10 px；飞越：隐藏；} # slider-pager { position :绝对值；bottom : 10pxright : 10pxz-index : 999；font-size : 0px} #滑块寻呼机。传呼机链接{左侧浮动：宽度： 15px高度： 15px线高： 15px文本对齐：中心；余量0 0 0 10px背景# FC0color: # 930} #滑块寻呼机。活动{ background : # 0c3 color : # fff }/*去掉阴影效果，浏览器不兼容由4jcms *//* .布朗克斯(Bronx)包装bx-viewport {-moz-box-shadow : 0 5px # CCC；-web套件-box-shadow : 0 5px # CCC；盒影： 0 5px # CCCborder:固体# fff 5pxleft :-5px；背景# fff} */# slider _ block {位置：相对；margin: 0自动高度： 245像素；页边距-top :10 px；飞越：隐藏；} # slider-pager { position :绝对值；bottom : 10pxright : 10pxz-index : 999；font-size : 0px} #滑块寻呼机。传呼机链接{左侧浮动：宽度： 15px高度： 15px线高： 15px文本对齐：中心；余量0 0 0 10px背景# FC0color: # 930} #滑块寻呼机。活动{ background : # 0c3 color : # fff }

/*去掉阴影效果，浏览器不兼容由4jcms *//* .布朗克斯(Bronx)包装bx-viewport {-moz-box-shadow : 0 5px # CCC；-web套件-box-shadow : 0 5px # CCC；盒影： 0 5px # CCCborder:固体# fff 5pxleft :-5px；背景# fff}*/

最后改造完毕