jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件。该幻灯片通过JSON数据来提供图片地址和描述信息等,你可以通过更换JSON数据来动态切换不同的图片。
使用方法
在页面中引入jquery和slider.js文件和font-awesome字体图标文件。
HTML结构
使用一个
作为幻灯片的容器,里面放置作为前后导航按钮的
CSS样式
为幻灯片设置下面的CSS样式。
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,36,0.6);
color: #fff;
}
.button-prev { left: 15px; }
.button-next { right: 15px; }
JSON数据
该幻灯片的图片和图片描述信息有JSON数据来提供,格式如下:
图片描述"
},{
"imagePath": "2.jpg","order": "3",{
"imagePath": "3.jpg","order": "1",{
"imagePath": "4.jpg","order": "4","slideText": "图片描述"
}
以上所述是小编给大家介绍的基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/jquery/46657.html