JSサイクルスプライト

<！DOCTYPE HTML > 
< HTML LANG = "ZH" > 
< 頭> 
    < メタ文字コード= "UTF-8"  /> 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0"  /> 
    < メタHTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ"  /> 
    < タイトル>用循环填充精灵图のための</ タイトル> 
    < スタイルタイプ= "テキスト/ cssの" >：250ピクセル; 
            マージン：100pxに自動; 
        } 
        #box李{ 
            幅：24ピクセル。
            高さ：は24px ; 
            フロート：左; 
            マージン：10pxの; 
            背景色：ピンク; 
            リストスタイルのタイプ：なし。
            背景：URL（IMG / taobaojinglingtu.png）ノー・リピート; 
        } 
    </ スタイル>
</ ヘッド> 
< ボディ> 
    < DIV ID = "ボックス" > 
        < UL > 
            < リチウム> </ 李> 
            < リチウム> </ 李> 
            < リチウム> </ 李> 
            < リチウム> </ 李> 
            < 李> < / 李> 
            < リチウム> </ 李> 
            < リチウム> </ 李> 
            < 李> </ 李> 
            < 李> </李> 
            < 李> </ 李> 
            < 李> </ 李> 
            < 李> </ 李> 
        </ UL > 
    </ divの> 
    < スクリプトタイプ= "テキスト/ JavaScriptを" > 
        VAR LIS = document.querySelectorAll（「リー' ）;
         のため（VAR Iは= 0 ; I < lis.length; I ++ ）{
 //             インデックス番号yはそれぞれのLi背景の座標であり、44で乗算されていることを確認し、指数y座標れる
             VARをインデックス= 私は* 44 。
            LIS [I] .style.backgroundPosition = ' 0 - ' + 指数+ ' PX ' 。
        } 
    </ スクリプト> 
</ ボディ> 
</ HTML > 
"