jquery bxslider幻灯片样式改造
找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动。
但是官方提供的显示效果真的很难看,让人难以接受。最后只能自己DIY了。
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="http://images.cnblogs.com/pic1.jpg" /></li>
<li><img src="http://images.cnblogs.com/pic2.jpg" /></li>
<li><img src="http://images.cnblogs.com/pic3.jpg" /></li>
<li><img src="http://images.cnblogs.com/pic4.jpg" /></li>
</ul>
在此基础上创建了一个slider_block的父层DIV,设置position为relative,主要是为子层slider-pager的绝对定位翻页“1,2,3”。
第三步:修改CSS jquery.bxslider.css,增加slider-pager的CSS样式优化
- /** custorm by 企业网站CMS系统:www.4jcms.com **/
- #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;
- }
- */
/** custorm by 企业网站CMS系统:www.4jcms.com **/
#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;
} */
最后改造完毕
jquery bxslider幻灯片样式改造的更多相关文章
- MBB类似jquery.bxslider插件轮播效果
首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...
- 响应式内容滑动插件jQuery.bxSlider
bxSlider特性 1.充分响应各种设备,适应各种屏幕: 2.支持多种滑动模式,水平.垂直以及淡入淡出效果: 3.支持图片.视频以及任意html内容: 4.支持触摸滑动: 5.支持Firefox,C ...
- 一款经典的jQuery slidizle 幻灯片
jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- Jquery Slick幻灯片插件
slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...
- jquery特效 幻灯片效果
jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- JQuery动态修改样式
JQuery动态修改样式 SetStyle(); function SetStyle() { $(".toolbar").remove(); $(".placeholde ...
- jQuery动态设置样式(style、css)
一.jQuery设置css样式 <div style="background-color:#ffffff;padding-left:10px;">测试jQuery动态获 ...
随机推荐
- windows多线程(九) PV原语分析同步问题
一.PV原语介绍 PV原语通过操作信号量来处理进程间的同步与互斥的问题.其核心就是一段不可分割不可中断的程序. 信号量的概念1965年由著名的荷兰计算机科学家Dijkstra提出,其基本思路是用一种新 ...
- linux 搭建epel本地库,并定时同步
1.安装rsyncyum -y install rsync.x86_64 2.同步epel至本地#http://mirrors.ustc.edu.cn/status/ 获取镜像库rsync路径mkdi ...
- Oracle Instant Client
下载地址: https://www.oracle.com/technetwork/database/database-technologies/instant-client/downloads/ind ...
- [华三] IPv6技术白皮书(V1.00)
IPv6技术白皮书(V1.00) http://www.h3c.com/cn/d_200802/605649_30003_0.htm H3C S7500E IPv6技术白皮书 关键词:IPv6,隧道 ...
- mybatis的setting
在mybaits中,setting的的配置参数如下(如果不在配置文件中配置将使用默认值): 设置参数 描述 有效值 默认值 cacheEnabled 该配置影响的所有映射器中配置的缓存的全局开关 tr ...
- mysql 开发基础系列3
日期类型 如果要用来表示年月日,通常用DATE 来表示. 如果要用来表示年月日时分秒,通常用DATETIME 表示. 如果只用来表示时分秒,通常用TIME 来表示. TIMESTAMP表示格式 :YY ...
- Day 4 学习笔记 各种图论
Day 4 学习笔记 各种图论 图是什么???? 不是我上传的图床上的那些垃圾解释... 一.图: 1.定义 由顶点和边组成的集合叫做图. 2.分类: 边如果是有向边,就是有向图:否则,就是无向图. ...
- mysql的check约束问题
mysql手册中写道:存储引擎会解析check子句,但是会把它忽略掉 The CHECK clause is parsed but ignored by all storage engines. 现在 ...
- ip netns
虚拟化网络都是基于netns实现,不管是昨日的openstack,还是今日的docker. ip netns ip-netns - process network namespace manageme ...
- 响应式开发(四)-----Bootstrap CSS----------Bootstrap CSS概览和相关注意事项
本章先记录一些与Bootstrap CSS相关的一些特点和注意事项以及兼容性. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正 ...