□ carouFredSel
画像をスライド・スクロールさせるjQuery「carouFredSel」、これをバナー表示用にカスタムしてみました。
バナー表示用なので、表示形式は「スライド」。また、「bxslider」では利用しなかったイージングを利用して、スライド時に少し動きがあるように設定しています。
| + サンプル | ||||||||
| + | デフォルトの設定 バナーを順番に表示させていく標準設定・イージングあり |
 |
||||||
| + | 複数表示時の設定 内容はデフォルト設定と同じで、複数設置した場合の表示サンプル |
|
||||||
| + 解説・カスタマイズ | ||||||||
| ダウンロードしたファイルをそのまま利用できる場所に移動・保存してください。 フォルダ・ファイル位置は変更しないでください。 index.htmlを開き、ご自身の環境で、間違えなく動作する事を確認してください。 その後、ご自身のホームページに合わせてデータの追加・移動を行ってください。 すでにindexページがありそこにバナーを追加する場合、以下の部分をコピーして利用してください。 \index.html
・header内の<!--ここから--> 〜 <!--ここまで-->のスクリプト文 ・body内の<!--ここから--> 〜 <!--ここまで-->の部分を表示させたい場所にコピー スクロールさせたい画像の保管場所は\images\slideの中です。(サンプルで"img_bahamas.jpg"等が保存されている場所) スクロールする画像サイズを元に、以下の部分を修正してください。 \index.html
スクリプト文内のwidth (サンプルで「width:234px;」の部分) スクリプト文内のheight (サンプルで「height:60px;」の部分) *この場合の「height」は画像サイズではなく表示サイズになる点に注意してください。サンプルの画像サイズ60pxの場合、heightを120pxにした場合、画像が2枚表示されます。(サンプル2を確認してください) スクロールする画像の枚数等に合わせて、以下の部分を修正してください。 index.html
「<div id="down1">」の<img src=〜 の部分を必要な枚数分変更してください。 Aタグでリンクを追加してください。 サンプルでは「スクロールにかかる時間は1000ms」「各画像の停止時間は6000ms」のオプションを設定しています。 変更が必要な場合、以下の部分を修正してください。 index.html
スクロールにかかる時間を変更する場合 : 「duration」の数値を変更。 *時間を延ばすと、イージングの時間も延びるので注意。 停止時間を変更する場合 : 「auto」の数値を変更。 *数値を大きくすると、各画像を表示する時間が長くなります。 イージングの種類を変更したい時は以下を修正してください。 index.html
スクリプト文の 「easing」を変更。 「cubic」「elastic」「linear」「quadratic」「swing」の5種類を選択可能です。 複数掲載する時は以下の部分に注意しつつ移植してください。(サンプル2、02.zipの内容を確認の上下記部分を修正してください。) index.html
script内「$("#down1").carouFredSel」の部分とdivのID部分を同じ名称で修正。 サンプルでは"down1"・"down2"と数字を増やしていますが、スクリプトとdivのID部分を同じ名称であれば何でもOKです。( banner_upやbanner_downなど・・・) スクリプト文は、同じ動作をさせる物でも複数必要なので、<!--複数リピート-->で区切られた部分を個数分増やしてください。 |
||||||||
| + ダウンロード | ||||||||
|
||||||||
| + リンク | ||||||||
| 配布元 : dev7studios | ||||||||
