マウスの位置で速度を調整できる、無限ループのjQueryスライドショー

2014.5.16 jQuery

延々とループし、マウスの位置によりループの速度を制限するスライドショーをjQueryで実装してみました。ブラウザはIE7まで対応しています。

今回のスライドに必要な機能は下記の3点です。

  • 並んだ画像が延々とループする
  • 最初は動かず、マウスが重なっているときだけ動く
  • マウスの位置によってループの速度が変わる

この条件を満たすスライドを探した結果、下記の記事を発見。

jQueryでプラグインを使わずに、マウス位置によるスクロールアニメーションを実装してみる | WebDesign Dackel | Webデザイン ダッケル

希望する動作にかなり近い!
しかしループでは無いので、ループ処理を追加します。
コードはこちら。

【HTML】

【CSS】

【JavaScript】

デモはこちら

複製の処理はjsで行なわず、htmlにul以下を直書きでもいいですね。
今回はulを複製しましたが、ul内の要素(li以下)のみを複製するほうが、wrap要素が必要なくなりもっとスマートなコードになるかもしれません。
IEは7まで動作を確認することができました。
参考にしたサイトではjsのスライド処理の説明がコメントアウトでされていますが、こちらではその多くを省きました。
詳しく知りたい方はこちらの記事
をご覧ください。

Related Posts