jquery プラグイン orbit.js は画像の折りたたみと回転を実装します Effects_jquery

jQuery 画像の折りたたみ回転コード。左右の矢印ボタンをクリックして、美しく簡潔な画像を切り替えることができます。主流のブラウザと互換性があるため、初心者には phplearn をダウンロードすることをお勧めします。

使用方法:
1. ヘッド領域参照ファイル jquery.min.js、chuxz.css
2. ファイルに ddf136ca4607cc15fe2bb04880b4b23f リージョン コード
を追加します 3. ページの下部にある jq.orbit.js.js、orbit.js
を引用します。 4. 画像フォルダー内の写真を対応するパスにコピーします

<div class="orbit-wrapper">       
  <div id="featured" class="orbit">  
    <a href="http://www.phplearn.cn/"><img src="images/1.jpg" width="185" alt="《Just Married》" title="《Just Married》"></a>  
    <a href="http://www.phplearn.cn/"><img src="images/2.jpg" width="185" alt="《佩加索斯》" title="《佩加索斯》"></a>  
    <a href="http://www.phplearn.cn/"><img src="images/3.jpg" width="185" alt="《太庙的一场偶遇》" title="《太庙的一场偶遇》"></a>  
    <a href="http://www.phplearn.cn/"><img src="images/4.jpg" width="185" alt="《为爱痴狂》" title="《为爱痴狂》"></a>  
    <a href="http://www.phplearn.cn/"><img src="images/5.jpg" width="185" alt="《游走，在北京的每一条街》" title="《游走，在北京的每一条街》"></a>  
  </div>  
</div>  
<script type="text/javascript" src="js/jq.orbit.js"></script>  
<script type="text/javascript" src="js/orbit.js"></script>

デモ画像:

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。