本文实例讲述了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>
