フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

jQuery

簡易イメージスライダーなどに使える!jqueryでclassをスイッチさせる方法

2016年07月09日

Pocket

ノンプラグインで実装するイメージスライダーなどに

jqueryでお馴染みのカルーセルプラグイン。
ただ、ちょっとした用途でプラグインは重いなぁとか、設定やサイトへの適応で少なからずかかる手間など考えると少し躊躇してしまう場合があります。

あとはエフェクトをもうちょっとこうしたい・・・という時のメンテナンス性もjqueryで書かれていると都合が悪かったりもするので、エフェクトはCSS3に任せて、jquery側はclassのスイッチだけにとどめるコンセプトで簡単なコードを書いてみました。

SAMPLE

コンセプト

前述したように、基本的にモーションはCSS3に書きます。

CSS

今回は左からスライドしながらフェードインして、少し置いて右へフェードアウトする仕様にしました。

デフォルトは-50pxの位置に置いて、スイッチが入った時に0pxの位置へ、スイッチが切れた時に50px左へ、という動きで書いてあります。

jquery

説明するほどのものでもないですが一応解説を。

スライドさせたい要素で表示されているi番目の要素を軸に、手前の要素からクラス-offを削除、軸の要素にクラス-offを追加、次の要素にクラス-onを追加、という動きをさせています。

あとはsetIntervalで繰り返し処理のみ、というシンプルな作りです。

ちょっと覚えておくと便利かも

エフェクトはCSS任せなので、今回はフェードイン・フェードアウトで書きましたが、他の動きをさせたい場合はcssを書くだけなので応用の利くテクニックかなと思います。

このカテゴリで良く読まれている記事
関連記事

COMMENT