JSプロダクションカルーセルイメージのコード共有

巴扎黑
リリース: 2017-07-19 16:29:16
オリジナル
1389 人が閲覧しました

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":"第四张轮播图"} ]
    ログイン後にコピー

    以上がJSプロダクションカルーセルイメージのコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!