jquery は、各number_jqueryに進行状況バーを含むスライドショーを実装します。

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;
}

• 


• 


• 


• 


• 





• 
  1
  
  


• 
  2
  
  


• 
  3
  
  


• 
  4
  
  


• 
  5
  
  

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。