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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 基于json数据的动态jquery轮播图插件
基于json数据的动态jquery轮播图插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-01-11
    阅读:
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
简要教程

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

使用方法

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

<link rel="stylesheet" media="all" href="dist/styles/jquery_carousel_slider.css" />
<script src="dist/scripts/jquery.min.js"></script>
<script src="dist/scripts/jquery_carousel_slider.js"></script>                  
                
HTML结构

使用一个<div>元素作为轮播图的容器。

<div class ='box' id="carousel_id"></div>
                
初始化插件

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

<script>
$(function(){
    /*1*/
    $.getJSON("JSON/data.js",function (result){
      var setting = {
        subject:'Subject',  //subject would be the theme of the slide box. 
        cardw : 145,    //page card's width.
        cardh : 217,    //page card's height.
        cardn : 5,      //the number of visible card.
        margin : 9,     //margin between cards.
        JSON :result    //prepare the JSON file.
      };
      $('#id').slider(setting);
    });
    /*2*/
    var setting2 = {
      subject:'Subject',
      cardw : 145,  
      cardh : 217,
      cardn : 5,    
      margin : 9,   
      JSON :result
    };
    /*3*/
    $.getJSON("JSON/data.js",function (result){
      setting2.JSON = result;
      $('#id').slider(setting2);
    });
//--------------------------------------------------------3.
    $.getJSON("JSON/data.js",function (result){
      $('#id').slider({
        subject:'Subject',
        cardw : 145,  
        cardh : 217,
        cardn : 5,    
        margin : 9,
        JSON :result
      });
    });

  });
</script>
                
JSON数据格式

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

{
  //注意 ! "Subject" 必须和配置参数中设置的一样。
  "Subject":[
      {
              "title":"Gin",
              "des":"1988",
              "imgpath":"path/to/image.jpg"
          },
          {
              "title":"Brandy",
              "des":"1977",
              "imgpath":"path/to/image.jpg"
          },
          ...
        ]
}                  
                

该jquery轮播图插件的github地址为:https://github.com/Carr1005/jquery-carousel-slider

网友评论