来源：自学PHP网 时间：2014-11-29 13:28 作者： 阅读:次
[导读] 这篇文章主要介绍了jquery幻灯片插件bxslider样式改进,对比官方样式以实例形式讲述了改进的技巧,非常实用,需要的朋友可以参考下...
|
本文实例讲述了jquery幻灯片插件bxslider样式改进方法，分享给大家供大家参考。具体如下： 对比了很多jquery的幻灯片，都觉得不是很好，最后发现bxslider兼容性最好，移动设备支持手动翻动。 但是官方提供的显示效果真的很难看，让人难以接受。最后只能自己DIY了。 bxslider官方样式如下：
改造后的样式如下：
第一步：引入bxslider 复制代码 代码如下: <!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="/lib/jquery.bxslider.css" rel="stylesheet" /> <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="/lib/jquery.bxslider.css" rel="stylesheet" /> 第二步：加入bxslider html代码 复制代码 代码如下: <div id="slider_block">
<ul class="bxslider"> <foreach name="slideList" item="obj"> <li><a href="{$obj.link_addr}" target="_blank"><img src="__APP__{$obj.slide_img_addr}" width='990' height='245'/></a></li> </foreach> </ul> <div id="slider-pager"> <foreach name="slideList" item="obj" key="i"> <a data-slide-index="{$i}" href="" class="pager-link">{$i}</a> </foreach> </div> </div> <div id="slider_block"> <ul class="bxslider"> <foreach name="slideList" item="obj"> <li><a href="{$obj.link_addr}" target="_blank"><img src="__APP__{$obj.slide_img_addr}" width='990' height='245'/></a></li> </foreach> </ul> <div id="slider-pager"> <foreach name="slideList" item="obj" key="i"> <a data-slide-index="{$i}" href="" class="pager-link">{$i}</a> </foreach> </div> </div> 原版官方的html代码是这样的： 复制代码 代码如下: <ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul> <ul class="bxslider"> <li><img src="images/pic11.jpg" /></li> <li><img src="images/pic12.jpg" /></li> <li><img src="images/pic13.jpg" /></li> <li><img src="images/pic14.jpg" /></li> </ul> 在此基础上创建了一个slider_block的父层DIV，设置position为relative，主要是为子层slider-pager的绝对定位翻页“1，2，3”。 第三步：修改CSS jquery.bxslider.css，增加slider-pager的CSS样式优化 复制代码 代码如下: #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; } */ #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 */ 最后改造完毕 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
