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
         

          Copier après la connexion
         
        

[ {"img":"img/banner1.jpg","desc":"第一张轮播图"}, {"img":"img/banner2.jpg","desc":"第二张轮播图"}, {"img":"img/banner3.jpg","desc":"第三张轮播图"}, {"img":"img/banner4.jpg","desc":"第四张轮播图"} ]