カルーセル図軽量言葉遣い

  1 <！DOCTYPE HTML>
   2 <HTMLのlang = "EN">
   3 <ヘッド>
   4      <メタのcharset = "UTF-8">
   5      <メタ名= "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1.0 ">
   6      <メタHTTP-当量=" X-UA-互換」コンテンツ= "IE =縁">
   7      <タイトル>ドキュメント</タイトル>
   8 </ HEAD>
   9 <スタイル>
 10  ■は{
 11      幅：900px;
12      高さ：500pxなど。
13      境界：1ピクセル固体＃000 。
14      位置：相対。
15      マージン：自動;
16     オーバーフロー：隠されました;
17      
18  }
 19  ■はUL、■はオール{
 20      リスト- スタイル：なし。
21      パディング：0 。
22      マージン：0 ;
23  }
 24  ■は用のULのLi {
 25      幅：900px;
26      高さ：500pxなど。
27      ディスプレイ：なし。
28  }
 29  ■はULリチウムのIMG {
 30      幅：900px;
31      高さ：500pxなど。
32  }
 33  ■はOLの{
 34      幅：120ピクセル。
35      位置：絶対。
図36は、      左：50重量％。
37      のmargin-left： - は50px;
38      底：20ピクセル。
39      高さ：20ピクセル;
40      背景：黒。
41      不透明度：0.5 。
42      ディスプレイ：フレックス。
43      正当化コンテンツを：省スペース均等;
44      パディング：10pxの0 。
45      BORDER- 半径20ピクセル。
46  }
 47  ■はOLの李{
 48      幅20ピクセル。
49      高さ：20ピクセル;
50      境界半径：50％ 。
51     背景：黒;
52      国境：1pxの固体＃999 ;
53      カーソル：ポインタ。
54  }
 55  ■はのオールli.current {
 56      背景：白;
57      遷移：0 .5s。
58  }
 59  ■はUL li.current {
 60      表示：ブロック;
61      遷移：1秒。
62  }
 63  ■は.LEFT、■は.RIGHT {
 64      位置：絶対。
65      上部：50％ 。
66      幅：30px;
67      高さ：30px;
68      マージントップ： -15ピクセル;
69      背景：黒。
70      不透明度：0.5 。
71      テキストベース整列：センター;
72      ライン- 高さ：30px;
73      テキストベースの装飾：なし;
74      font- 重量：太字;
75      色：#FFF。
76  }
 77  .LEFT {
 78      左：0 。
79  }
 80  .RIGHT {
 81      右：0 。
82  }
 83 </スタイル>
 84 <body>
 85      <DIVクラス= "ボックス">
86          <UL>
 87              <LIクラス= "現在"> <IMG SRC = "画像/ a.jpg" ALT = ""> </ LI>
 88              <LI> <IMG SRC = "画像/ b.jpg" ALT = ""> </ LI>
 89              <LI> <IMG SRC = "画像/ c.jpg" ALT = ""> </ LI>
 90          </ UL>
 91          <OL>
 92              <LIクラス= "現在"> < / LI>
 93              <LI> </ LI>
 94              <LI> </ LI>
 95          </ OL>
 96          < -如需显示小于号、我们必须这样写：＆LT;！或＆＃60;
         <HREF = "javascriptの:;" クラス= "右">＆GT; </a>の
 99      </ div>
 100      <スクリプト>
 101      のvarジュリス= document.querySelectorAll（ "UL李" ）。
102  VAR olis = document.querySelectorAll（ "オール李" ）。
103  VARのボックス= document.querySelector（ "ボックス" ）。
104  VAR leftbn = document.querySelector（ "左" ）。
105  VARの rightbn = document.querySelector（ "右" ）。
106  VaRのタイマー。
107  のvar NUM = 0 ;
（）{
 109      てclearInterval（タイマ）。
110  }
 111 box.onmouseout = 関数（）{
 112      タイマ=たsetInterval（右、2000年）。
113  }
 114 leftbn.onclick = 左。
115 rightbn.onclick = 右。
116  機能左（）{
 117      num-- 。
118      であれば（NUM <0 ）{
 119          NUM = ulis.length-1 。
120      }
 121      ムーブ（）;
122  }
 123  関数移動（）{
 124     用（VAR ; iはolis.lengthを<I ++は、I = 0 ）{
 125          olis [I] .className = '' ;
126          ジュリス[I] .className = '' ;
127      }
 128      olis [NUM] .className = '現在の' ;
129      ジュリス[NUM] .className = '現在の' ;
130  }
 131  
132  関数右（）{
 133      NUM ++ 。
134      であれば（NUM == {ulis.length）
 135          NUM = 0 。
136      }
 137      ムーブ（）
 138  }
139タイマー=のsetInterval（右、2000 ）;
140  のための（VAR ; iはolis.lengthを<I ++は、I = 0 ）{
 141      olis [i]は.INDEX = I。
142      olis [i]は.onclick = 関数（）{
 143          NUM = この.INDEX。
144          移動（）。
145          
146      }
 147  }
 148      </スクリプト>
 149 </ BODY>
 150 </ HTML>
効果：
カルーセル図軽量言葉遣い

おすすめ
