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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
vue路由插件之vue-route
Jun 13 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
MySQL 日期时间函数常用总结
2012/06/12 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
简单的python后台管理程序
2017/04/13 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python如何判断IP地址合法性
2020/04/05 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
详解python如何引用包package
2020/06/07 Python
如何真正的了解python装饰器
2020/08/14 Python
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
员工晚婚的请假条
2014/02/08 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
2014年母亲节寄语
2014/05/07 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python