幻灯片/轮播

基于json数据的动态jquery轮播图插件

创客主机


这是一款 基于json数据的动态jquery轮播图插件。该jquery轮播图插件模仿Facebook的轮播图UI,并通过json文件来动态获取轮播图中图片和描述信息的数据,来制作漂亮的多卡片轮播效果。

使用方法

在页面中引入jquery_carousel_slider.css,jquery和jquery_carousel_slider.js文件。

  1. <link rel="stylesheet" media="all" href="dist/styles/jquery_carousel_slider.css" />
  2. <script src="dist/scripts/jquery.min.js"></script>
  3. <script src="dist/scripts/jquery_carousel_slider.js"></script>

HTML结构

使用一个

元素作为轮播图的容器。

  1. <div class ='box' id="carousel_id"></div>

初始化插件

该jquery轮播图插件可以通过下面几种方法来进行初始化。

  1. <script>
  2. $(function(){
  3.     /*1*/
  4.     $.getJSON("JSON/data.js",function (result){
  5.       var setting = {
  6.         subject:'Subject',  //subject would be the theme of the slide box. 
  7.         cardw : 145,    //page card's width.
  8.         cardh : 217,    //page card's height.
  9.         cardn : 5,      //the number of visible card.
  10.         margin : 9,     //margin between cards.
  11.         JSON :result    //prepare the JSON file.
  12.       };
  13.       $('#id').slider(setting);
  14.     });
  15.     /*2*/
  16.     var setting2 = {
  17.       subject:'Subject',
  18.       cardw : 145,  
  19.       cardh : 217,
  20.       cardn : 5,    
  21.       margin : 9,   
  22.       JSON :result
  23.     };
  24.     /*3*/
  25.     $.getJSON("JSON/data.js",function (result){
  26.       setting2.JSON = result;
  27.       $('#id').slider(setting2);
  28.     });
  29. //--------------------------------------------------------3.
  30.     $.getJSON("JSON/data.js",function (result){
  31.       $('#id').slider({
  32.         subject:'Subject',
  33.         cardw : 145,  
  34.         cardh : 217,
  35.         cardn : 5,    
  36.         margin : 9,
  37.         JSON :result
  38.       });
  39.     });
  40.  
  41.   });
  42. </script>

JSON数据格式

要使该jquery轮播图插件正常工作,必须提供正确的json数据格式。

  1. {
  2.   //注意 ! "Subject" 必须和配置参数中设置的一样。
  3.   "Subject":[
  4.       {
  5.               "title":"Gin",
  6.               "des":"1988",
  7.               "imgpath":"path/to/image.jpg"
  8.           },
  9.           {
  10.               "title":"Brandy",
  11.               "des":"1977",
  12.               "imgpath":"path/to/image.jpg"
  13.           },
  14.           ...
  15.         ]
  16. }

Github地址:https://github.com/Carr1005/jquery-carousel-slider

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!