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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
Vue自定义指令使用方法详解
Aug 21 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
微信分享的标题、缩略图、连接及描述设置方法
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
星际玩家的三大定律
2020/03/04 星际争霸
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php简单的上传类分享
2016/05/15 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python快排算法详解
2019/03/04 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
销售人员求职的自我评价分享
2014/03/15 职场文书
运动会演讲稿100字
2014/08/25 职场文书
武当山导游词
2015/02/03 职场文书
综合测评个人总结
2015/03/03 职场文书
关于车尾的标语大全
2015/08/11 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技