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图片预加载 等比缩放实现代码
Oct 04 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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
function.inc.php超越php
2006/12/09 PHP
php 错误处理经验分享
2011/10/11 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php提高网站效率的技巧
2015/09/29 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python爬虫添加请求头代码实例
2019/12/28 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python使用建议技巧分享(三)
2020/08/18 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
中科软测试工程师面试题
2012/06/16 面试题
简历自荐信
2013/12/02 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
体检通知范文
2015/04/21 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
JavaScript 定时器详情
2021/11/11 Javascript