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);
}