おはようございます。本日の渋谷は酉の市があるようで、朝から賑やかです。宮益坂には出店がたくさん並んでいます。
さて、本日の本題ですが、今日はjQueryで「連続した処理」について書こうと思います。画像をスライドさせる時なんかに使えますね。
スマフォやタブレットの普及で、Flashが敬遠されがちなので、最近はjsでのスライドショーのご依頼も増えています。
合言葉は「jQuery こわくない」です。
デモ
今回作るのはこちら。延々と動かすだけなので難しい処理も必要なく、とっても簡単です。
デモのファイルはこちらからダウンロードできます。
クリックすると動くとか、右端まで行ったらまた左端に戻るとかは、ちょっと別の処理が必要ですね。それは次の機会に応用編で書きたいですね。
Step1：まず下準備
こちらはいつもと同じですね。まず必要なファイルを読み込みます。headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は scroll.js とします）を読み込みます。
<head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/scroll.js" type="text/javascript"></script>
</head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/scroll.js" type="text/javascript"></script>
</head>
今回のscriptは短いので直書きでもいいと思います
Step2:次にHTMLの準備
今回必要なのは中身が空のdivが1つだけ。idをjsの中の記述と合わせ、demoにします。
<div id=”demo” ></div>
このdivにstyleを書き足します。
スクロールさせたい画像をbackgroundで設定し、repeatをかけておきます。backgound以外はお好みのCSSで記述してください。
<div id=”demo” style=”display:block; width:300px; border:#CCC solid 2px; height:80px; background:url(/common/images/img04.gif) #000 repeat-x 120px top;“></div>
Step4:jsを書き込む
最後に、headerで読み込んでいるはずの scroll.js の中身を書き込んでいきましょう。
$(function(){
setInterval(function(){
$('#demo').animate({backgroundPosition:'+=' + '1' + 'px'},30);
},30);
});解説
setIntervalを使用すると処理を繰り返すことができます。30の箇所の数値を変更すると処理の間隔を遅くしたり早くしたりできます。
setInterval(function(){
//ここに書いた処理が30ミリ秒ごとに繰り返しされます
},30);それぞれ該当の箇所の数値を変更すると、動きを調整できます。
$(function(){
setInterval(function(){
//ここに書いた処理が30ミリ秒ごとに繰り返しされます
//#demoのbackgroundを30ミリ秒かけて1px右にスライドさせます
$('#demo').animate({backgroundPosition:'+=' + '1' + 'px'},30);
},30);
});他にもこんな動きなど。
▼3000ミリ秒ごとに1000ミリ秒かけて80px右にスライド。divの中に透過pngを配置。
▼「'+='」の部分を「'-='」に変更すると、反対方向へスライドします。
