読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

個人サイト作成③ スワイプ追随イベントを実装

制作 CoffeeScript Sass Slim

chuckです。

前回はスワイプ動作により、ページをめくる機能ができました。

 

chuckwebtips.hatenablog.com

 

今回は、スワイプに追随して、前・次のページも動くようにしたいと思います。

現状↓

http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow3.html

 

※余談ですが今回からはIDEでの開発になります。わくわく

chuckwebtips.hatenablog.com

 

道筋を考える

現状では、この処理でページを回転させています。

f:id:chuck0523:20151010133016p:plain

画像が小さい…

 

なので、この処理につづいて前・次のページを持ってくればOKですね。

n - 1あるいは n + 1のDOMを操作すればいけそうです。

 

できた

特に苦労することなくできました。

まずはjQueryのindexメソッドを使って、クリックされたページのindexを取得します。そして、右回転か左回転かに応じて、前あるいは次のページを持ってきます。そこでindex - 1あるいは index + 1 のDOMを持ってきます。

 

作ったやつ

ちゃんと次のページがついてきています。

f:id:chuck0523:20151010135729p:plain

http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow4.html

 

書いたコード

gista3faeac04124d089cdcd

 

参考

qiita.com