jquery円形回転画像スクロール切り替えeffect_jquery

このエフェクトは非常に特別でかわいいので、興味のある友人はそれをダウンロードして使用することができます。
追記: 一般的なブラウザと互換性があるように変更されました。
レンダリング:

オンライン デモ: http://demo.jb51.net/js/ImagesRotateScroll/index.html
ステップ 1. HTML を作成します。

コードをコピー コードは次のとおりです:

• 
  
• 
  ;li> ;


• 


• 


• 
  
• ;


• 


• 
  
• 
• 


• 


• 
🎜>
• 


• 

ステップ 2. CSS を作成します

コードをコピーします コードは次のとおりです: #rotatescroll {

width: 300px;

height; : 300px;
マージン: 0 自動;
#rotatescroll .viewport{
幅: 300px;
位置: 相対;
マージン: 0 自動;
オーバーフロー: 非表示;
#rotatescroll .overview {
位置: 絶対; ;
マージン: 0;
左: 0;
}
幅: 300px; 🎜>高さ: 300ピクセル;
位置: 相対;
#rotatescroll .overlay {
高さ: 300ピクセル;
背景: url(.. /images/bg-rotatescroll.png) no-repeat 0 0;
位置: 絶対;
上: 0; .thumb {
幅: 26px;
高さ: 26px;
z-index: 200;
背景: url(../images/bg-thumb.png) 繰り返しなし 50% 50 %;
位置: 絶対;
カーソル: 0px;
}
#rotatescroll {
背景: url(. ./images/bg -dot2.png) no-repeat 0 0;
表示: 12px;
位置: 絶対; ;
top : 3px;
z-index: 100;
#rotatescroll {display: none; }



ステップ 3. jQuery とスクリプトのパッケージ





コードをコピー


コードは次のとおりです。 script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js">




パッケージのダウンロード
http://www.jb51.net/jiaoben/34107.html