jquery は、各number_jqueryに進行状況バーを含むスライドショーを実装します。
WBOY
リリース： 2016-05-16 17:41:55
オリジナル
971 人が閲覧しました
Amazon がデザインを変更する前、私はホームページの各番号に進行状況バーが表示されるスライドショーがとても気に入っていたことを覚えています。
私は退屈していて、自分自身で一つのことに気づきました。 jQueryを使います。
再生プロセス中に進行状況バーが表示されるため、
animate() メソッドが主に使用されます。
Ie6 には対応していません。もちろん変更可能です。
デモ
ダウンロード
最初にレンダリングを見てください
コードを見てください:
コードをコピー コードは次のとおりです:
*{パディング: 0;マージン: 0;}
ul li{リストスタイル: なし;}
.slideplay ,.slideshow{
位置: 相対;
}
.slideshow li{
位置: 絶対;
左: 0;
トップ: 0;
表示: なし。
}
.loadbar{
位置: 絶対;
下: 60ピクセル;
左: 250ピクセル;
z インデックス: 9;
}
.loadbar li{
幅: 40px;
高さ: 20px;
フロート: 左;
位置: 相対。
マージン右: 5px;
境界半径: 2px;
ボーダー: 1px ソリッド #e5f9ff;
}
.loadbar スパン{
位置: 絶対;
左: 0;
トップ: 0;
高さ: 20px;
幅: 40px;
text-align: 中央;
z インデックス: 12;
カーソル: ポインタ;
色: #fff;
境界半径: 2px;
}
.loadbar em{
位置: 絶対;
左: 0;
トップ: 0;
高さ: 20px;
背景: #31d81a;
z インデックス: 10;
境界半径: 2px;
不透明度: 0.7
}
.zindex{
z-index: 1;
}
