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

前端技术 2023/09/04 JavaScript

本文实例讲述了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 */
/*.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;
}
*/

本文地址：https://www.stayed.cn/item/11467

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案