使用Ajax和JSON实现轮播特效

Ajax获取JSON数据并解析，JSON文件中存储着轮换显示的图片路径，超链接，标题。

$.ajax({
     type:"post",
     url:"js/json.js",
     async:false,
     success"function(data){
            for(var i=0;i<data.length;i++){
                   var newHtml='<li><a href='"+data[i].href+"'><img src='''+data[i].src+'''/></a><div class="slide-btm"><h2><a href='''+data[i].href+'''>'+data[i].title+'</a></h2></div></li>'
                   $(".img-box").append(newHtml);
                   $(".page-con").append('<li></li>');
             }
             $(".img-box li").not(":first").hide();
     },
     dataType:"json"
 });

轮播实现函数关键代码如下

function slide（）{
     if（!stop）{
             page++;   //当前轮播加1（下一个图片显示）
             if(page==4){
                   page=0;  //当page大于图片长度时，从第一个图片开始播放
              }
              $(".page-con li").removeClass("cur"); //所有底部按钮不改变背景
              $(".img-box li").fadeOut(200);  //所有img隐藏，使用fadeOut
              $(".page-con li").eq(page).addClass("cur");  //相应底部按钮背景改变
              $(".img-box li").eq(page).fadeIn();   //相应img显示，使用fadeIn
     }
     setTimeout(slide,3000);
}