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中void(0)的具体含义解释
Aug 02 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
JavaScript实现栈结构详细过程
Dec 06 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
详解vue axios中文文档
2017/09/12 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
python 统计代码行数简单实例
2017/05/04 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
高中军训感想300字
2014/03/04 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
2014年店长工作总结
2014/11/17 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
Python函数中的不定长参数相关知识总结
2021/06/24 Python