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+xml技术实现分页浏览
Jul 27 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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
php xml-rpc远程调用
2008/12/19 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
Ext 今日学习总结
2010/09/19 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
vue实现拖拽效果
2019/12/23 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python实现两个文件夹的同步
2019/08/29 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
大学生自荐信
2013/12/11 职场文书
实习评语
2013/12/16 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
机修工工作职责
2014/02/21 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers