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


Posted in Javascript onOctober 15, 2014

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

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

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

bxslider官方样式如下:

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

改造后的样式如下:

jquery幻灯片插件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;

}

*/

最后改造完毕

Javascript 相关文章推荐
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
jquery css实现流程进度条
Mar 26 jQuery
如何管理Vue中的缓存页面
Feb 06 Vue.js
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 #Javascript
js实现select组件的选择输入过滤代码
Oct 14 #Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 #Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 #Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 #Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 #Javascript
js解决select下拉选不中问题
Oct 14 #Javascript
You might like
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
python爬虫 requests-html的使用
2020/11/30 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
2014年幼儿园元旦活动方案
2014/02/13 职场文书
人事经理岗位职责
2014/04/28 职场文书
关于青春的演讲稿
2014/05/05 职场文书
支部鉴定材料
2014/06/02 职场文书
护理实习生带教计划
2015/01/16 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
婚礼父母致辞
2015/07/28 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android