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

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

在线预览源码下载

使用方法

在页面中引入jquery和slider.js文件和字体-棒极了字体图标文件。

链接rel='样式表href=' https://cdnjs。cloudflare。com/Ajax/libs/font-awesome/4。4 .0/CSS/font-牛逼。量滴CSS ' script type=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http 3360 js/slider。js '/脚本html结构

使用一个差异作为幻灯片的容器，里面放置作为前后导航按钮的按钮元素。

div class=' slider ' id=' slider ' button type=' button ' class=' button button-prev ' I class=' fa-chevron-left ' aria-hidden=' true '/I/button button type=' button ' class=' button-next ' I class=' fa-chevron-right ' aria-hidden=' true '/I/button/div CSS样式

为幻灯片设置下面的半铸钢钢性铸铁(铸造半钢)样式。滑块{宽度： 100%；飞越：隐藏；高度： 500像素；相对位置：}.幻灯片列表{位置：绝对值；top : 0；宽度： 300%;高度： 100%;列表样式：无；}.sliderList李{位置：绝对；top : 0；底部： 0；飞越：隐藏；横向： 33.333333%;高度： 100%;padd : 0；保证金： 0；}.幻灯片列表李img {宽度： 100%；最小高度： 100%;border:无；}.bulletList { position :绝对值；bottom: 15px宽度： 100%;边距： 0自动列表-样式：无；}.李{显示：行内块；宽度： 12pxheight : 12pxmargin 3360 0 5px-web套件-边框-半径： 50%；-蚊子-边界-半径： 50%；-ms-边界-半径：50%；边界半径： 50%;背景-color : # fff；光标：指针；}.bulletList .bulletactivity {底色： # 0b0d 18}.内容{位置：绝对值；top : 0；左： 0；右： 0；背景-color: rgba(0，0，0，0.3)；font-size : 48pxcolor: # fff}。按钮{位置：绝对值；底部： 15 pxz-指数： 2；显示器：块；宽度： 40px高度： 40px盒子尺寸：边框盒子；保证金： 0；padd : 0；border:无；-web套件-边框-半径： 5px-moz-border-radius : 5px；-ms-border-radius : 5px；边界半径： 5px背景-color: rgba(5，0，36，0.6)；color: # fff}。button-prev { left : 15px；}.按钮-下一步{ 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-滑块幻灯片插件的开源代码库地址为：https://github。com/erya SOV/jquery-滑块

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