Javascriptでボタンを押したら少しずつスクロールさせる

お手本

イメージとしてはポカリスエットのサイトに置かれているこういうの

スクリーンショット 2017-05-28 14.55.41.png

サンプル

サンプルとしてはこういうものを用意

スクリーンショット 2017-05-28 14.56.53.png

実装

Javascriptの.animate()関数を使う

html

<div id="test">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150"  id="one">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="tow">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="three">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="four">
  </div>

javascript

//カウンタの初期値を設定
var countUpValue = 0;

function OnButtonClickRight() {
countUpValue = countUpValue + 50 ;
$("#test").animate({marginLeft: countUpValue});
}

function OnButtonClickLeft() {
countUpValue = countUpValue - 50 ;
$("#test").animate({marginLeft: countUpValue});
}

悩みどころ

でも、これだと、要素が端っこまで来た時に、画面の外側に消えていってしまう。ループされるにはどうすればいか… わかるからアドバイスください

スクリーンショット 2017-05-28 15.01.01.png

参考

jsfiddle

animate offset().left

Javascriptでclick(タップ)するたびにカウントアップとカウントダウン

ポカリ

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

ホーム