html结构
Document
js
(function(){var banner = document.getElementById('banner');var bannerInner = utils.firstChild(banner);var bannerTip = utils.children(banner,'ul')[0];var imgList = bannerInner.getElementsByTagName('img');var oLis = bannerTip.getElementsByTagName('li');var bannerLeft = utils.children(banner,'a')[0];var bannerRight = utils.children(banner,'a')[1];//实现数据绑定：Ajax请求数据、按照字符串拼接的方式绑定数据var jsonData = null,count = null~function(){var xhr = new XMLHttlRequest;
xhr.open('get',"json/banner.txt?_="+Math.random(),false);
xhr.onreadystatechange = function(){if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
jsonData = utils.formatJSON(xhr.responseText);
}
}
xhr.send(null);
}()~function(){//绑定轮播图区域的数据var str = "";if(jsonData){for(var i = 0,len = jsonData.length;i':str+='';
}
}
bannerTip.innerHTML = str;
}()//图片延迟加载function lazyImg(){for(var i = 0,len = imgList.length;i oLis.length-1 ? 0 : step;for(var i = 0,len = oLis.length;i 绑定的数据
[
{"img":"img/banner1.jpg","desc":"第一张轮播图"},
{"img":"img/banner2.jpg","desc":"第二张轮播图"},
{"img":"img/banner3.jpg","desc":"第三张轮播图"},
{"img":"img/banner4.jpg","desc":"第四张轮播图"}
]
