【Javascript】【再考】jquery.cross-slide.jsの改造 | Wood-Roots:blog

2013
07/22

【再考】jquery.cross-slide.jsの改造

以前jquery.cross-slide.jsの改造という記事を書きました。
スクリプト内に画像パスを書くタイプのスクリプトを改変し、HTML内の画像を取得してアニメーションするという内容です。

このたび同様の処理を行う必要があったので改めて見なおしたところ、スクリプト本体の改造は不要でした。

CrossSlideというプラグインは以下のように指定するようになっています。

1
2
3
4
5
6
7
8
9
$('#placeholder').crossSlide({
  sleep: 2,
  fade: 1
}, [
  { src: 'sand-castle.jpeg' },
  { src: 'sunflower.jpeg'   },
  { src: 'flip-flops.jpeg'  },
  { src: 'rubber-ring.jpeg' }
]);

この画像パスを指定している部分（[~]の部分）は配列を渡せばいいので、crossSlideメソッドが実行される前に一旦配列を生成してそれを使うと本体の改変は不要でした。

以下の様なHTMLの#slideshow内でアニメーションさせたい場合、

1
2
3
4
5
6
7
8
<div id="slideshow">
<ul>
<li><img src="img/hoge.jpg" alt="" /></li>
<li><img src="img/fuga.jpg" alt="" /></li>
<li><img src="img/foo.jpg" alt="" /></li>
<li><img src="img/bar.jpg" alt="" /></li>
</ul>
</div>

以下の様なスクリプトで実現することができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//imgという配列を生成
var img = [];
$('#slideshow ul li').each(function(key,value){
img[key] = {
'src': $(this).find('img').attr('src'),
'dir': key%2 ? 'up' : 'down'  //upとdownを交互に適用させれば行ったり来たりするアニメーションになる。
};
});
 
//ここで実行
//div#slideshow内を空にして代わりにアニメーションを突っ込んでいる。
$('#slideshow').empty().crossSlide({
speed: 40,
fade: 5
},img);

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social