通常、このような回転子をサイトに配置するには、特別なjavascriptコードをインストールするだけで十分です。 さらに詳しく見ると、このjavascriptのタスクは、特別なiframeをページに埋め込むことです。これにより、開発者のサイトからページにバナーローテーターが既に読み込まれます。
すべてうまくいきますが、このアプローチにはいくつかの欠点があります。
- サイトの脆弱性。 悪意のあるコードがサイトにアップロードされる可能性があります。 したがって、サイトにローテーターを配置する場合は、開発者を信頼する必要があります
- 開発者のサイトに依存します。 つまり 開発者のサイトが利用できない場合、バナーローテーターはサイトに表示されません。
- ページの読み込み時間が長くなります。 このようなバナーローテーターのソースコードを見ると、さまざまなJavaScriptファイルとライブラリが接続されていることがわかります。 同時に、jQueryなどの一部のライブラリは既にページに接続できますが、ブラウザはそれを2回ダウンロードする必要があります。
このすべてが私に自分のバナーローテーターを作成することを考えさせ、それは誰にも依存しません。そして、私にとって最後のキックは、このサイトで使用するローテーターであるEvgeny Popovのサイト（または彼と一緒にいたもの）私のサイトが長い間ロードしていたためです。
その結果、私自身のjQueryバナーローテーターが登場しました。その主な利点は、追加のjavascriptライブラリ（もちろんjQueryを除く）を必要とせず、ローテーター自体のすべてのhtmlコードがプラグイン自体のjavascriptによって生成されることです。 これにより、ブラウザはプラグインファイルを一度キャッシュしてからキャッシュから取得できるようになり、サイトの読み込み速度が向上します。
サイトでこのようなローテーターを使用するには、最初にjQueryライブラリーとプラグイン自体を接続する必要があります。 ただし、jQueryライブラリは通常の方法ではなく、Googleリポジトリから接続します。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>'); </script> <script type="text/javascript" src="js/jquery.rotator.js"></script>
このコードは、サイトのタグの間に配置する必要があります。
このテーマについては、「 GoogleリポジトリからjQueryをロードすることでページのロード速度を上げる 」という特別な記事があるので、これにこだわるつもりはありません。
必要なすべてのJavaScriptファイルが接続されたら、次のスタイルをページに追加する必要があります。
ul.slides_rotator{ margin: 0; padding: 0; position: relative; list-style: none; } div.rotator{ float: left; margin: 0 25px; position: relative; } a.rotator-nav{ position: absolute; top: 50%; margin-top: -16px; z-index: 3; cursor: pointer; } a.rotator-nav div{ height: 32px; width: 32px; background: url('../images/nav.png') no-repeat; } #rotator-left{ left:-16px; } #rotator-left div{ background-position: 0 0; } #rotator-left:hover div{ background-position: 0 -32px; } #rotator-right{ right:-16px; } #rotator-right div{ background-position: -32px 0; } #rotator-right:hover div{ background-position: -32px -32px; }
スタイルが接続されたら、rotatorプラグイン自体の呼び出しを開始できます。 これを行うには、回転子を配置する場所に次のコードを記述します。
<div id='rotator'></div>
これでプラグイン自体を呼び出すことができます。 これは次のように行われます。
<script type="text/javascript"> $(function(){ $('#rotator').rotator({ slides: [ { url:'http://1popov.ru/c/577/disc1', img:'images/white200x450.jpg' }, { url:'http://1popov.ru/c/577/disc3', img:'images/beige200x450.jpg' }, { url:'http://1popov.ru/c/577/disc5', img:'images/sky200x450.jpg' }, { url:'http://1popov.ru/c/577/disc6', img:'images/gold200x450.jpg' }, { url:'http://1popov.ru/c/577/disc8', img:'images/green200x450.jpg' }, { url:'http://1popov.ru/c/577/disc11', img:'images/black200x450.jpg' } ], speed: 500, timeout: 3000, width: 200, height: 450, random: true, autorun: true, fx: 'slide', nav: false }); }) </script>
ご覧のとおり、多くのパラメーターをプラグインに渡します：
- slides-アフィリエイトリンクが指定されたオブジェクトで構成されるスライドの配列-url、およびスライド画像-img
- 速度 -アニメーション速度（ミリ秒）。
- タイムアウト-1つのスライドを表示する時間（ミリ秒）。
- ランダム-trueに設定されている場合 、スライドは混oticとした順序で表示されます
- width -1つのスライドの幅
- height -1つのスライドの高さ
- fx-アニメーション効果（スライド-スライド、フェード-調光）、デフォルト-フェード
- autorun-すべてのスライドを自動的にスクロールします。デフォルトはtrueです
- nav-ナビゲーションボタンを表示、デフォルトはfalse
デモページはこちらでご覧いただけます。
ソースはここからダウンロードできます。
バナーを回転させる簡単なプラグインを次に示します。 誰かが役に立つといいな。
UPD：コードを修正し、最後のスライドの後に最初のスライドが再び表示されるようになりました。 また、便宜上、いくつかの追加オプションが追加されました。