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有关的小细节
Apr 02 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python二分法搜索算法实例分析
2015/05/11 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Django与JS交互的示例代码
2017/08/23 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
人事专员工作职责
2014/02/22 职场文书
班级心理活动总结
2014/07/04 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
Python创建SQL数据库流程逐步讲解
2022/09/23 Python