html構造
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
バインドされたデータ
[ {"img":"img/banner1.jpg","desc":"第一张轮播图"}, {"img":"img/banner2.jpg","desc":"第二张轮播图"}, {"img":"img/banner3.jpg","desc":"第三张轮播图"}, {"img":"img/banner4.jpg","desc":"第四张轮播图"} ]
以上がJSプロダクションカルーセルイメージのコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。