基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)


Posted in Javascript onAugust 10, 2016

jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件。该幻灯片通过JSON数据来提供图片地址和描述信息等,你可以通过更换JSON数据来动态切换不同的图片。

基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

在线预览     源码下载

使用方法

在页面中引入jquery和slider.js文件和font-awesome字体图标文件。

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

HTML结构

使用一个<div>作为幻灯片的容器,里面放置作为前后导航按钮的<button>元素。

<div class="slider" id="slider">
<button type="button" class="button button-prev">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button type="button" class="button button-next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</button>
</div>

CSS样式

为幻灯片设置下面的CSS样式。

.slider {
width: 100%;
overflow: hidden;
height: 500px;
position: relative;
}
.sliderList {
position: absolute;
top: 0;
width: 300%;
height: 100%;
list-style: none;
}
.sliderList li {
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
width: 33.333333%;
height: 100%;
padding: 0;
margin: 0;
}
.sliderList li img {
width: 100%;
min-height: 100%;
border: none;
}
.bulletList {
position: absolute;
bottom: 15px;
width: 100%;
margin: 0 auto;
list-style: none;
}
.bulletList li {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.bulletList .bulletActive { background-color: #0b0d18; }
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
font-size: 48px;
color: #fff;
}
.button {
position: absolute;
bottom: 15px;
z-index: 2;
display: block;
width: 40px;
height: 40px;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
background-color: rgba(5, 0, 36, 0.6);
color: #fff;
}
.button-prev { left: 15px; }
.button-next { right: 15px; }

JSON数据

该幻灯片的图片和图片描述信息有JSON数据来提供,格式如下:

sliderJSON = [
{
"imagePath": "1.jpg",
"order": "2",
"url": "#",
"slideText": "图片描述"
},
{
"imagePath": "2.jpg",
"order": "3",
"url": "#",
"slideText": "图片描述"
}, 
{
"imagePath": "3.jpg",
"order": "1",
"url": "#",
"slideText": "图片描述"
},
{
"imagePath": "4.jpg",
"order": "4",
"url": "#",
"slideText": "图片描述"
}

jquery-slider幻灯片插件的github地址为:https://github.com/eryasov/jquery-slider

以上所述是小编给大家介绍的基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
JS实现简单九宫格抽奖
Jun 28 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 #Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 #Javascript
JS获取鼠标选中的文字
Aug 10 #Javascript
浅析JavaScript函数的调用模式
Aug 10 #Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 #Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 #Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 #Javascript
You might like
一个好用的分页函数
2006/11/16 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
python实现简单tftp(基于udp协议)
2018/07/30 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
通过实例解析python and和or使用方法
2020/11/14 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
市场营销管理制度
2014/01/29 职场文书
财务总经理岗位职责
2014/02/16 职场文书
加油口号大全
2014/06/13 职场文书
法学求职信
2014/06/22 职场文书
求职自我推荐信
2014/06/25 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
青岛导游词
2015/02/12 职场文书
公务员年度个人总结
2015/02/12 职场文书