基于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 相关文章推荐
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
Javascript变量作用域详解
Dec 06 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 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
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
php 删除cookie方法详解
2014/12/01 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python计算最大优先级队列实例
2013/12/18 Python
Python使用turtule画五角星的方法
2015/07/09 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python文本数据处理学习笔记详解
2019/06/17 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python retrying模块的使用方法详解
2019/09/25 Python
python实现批量文件重命名
2019/10/31 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
python实现126邮箱发送邮件
2020/05/20 Python
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
业务经理的岗位职责
2013/11/16 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
丑小鸭教学反思
2014/02/03 职场文书
学习雷锋标语
2014/06/25 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
Nginx跨域问题解析与解决
2022/08/05 Servers