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

前端之家收集整理的这篇文章主要介绍了基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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": "图片描述" }

jquery-slider幻灯片插件的github地址为:

以上所述是小编给大家介绍的基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/jquery/46657.html

猜你在找的jQuery相关文章