まだデータがありません。
タイトルアニメーション付きの画像スライドショー「desSlideshow」
当ページのリンクには広告が含まれています。
スポンサーリンク
タイトルアニメーション付きの画像スライドショーを実装するプラグイン「desSlideshow」を紹介します。
jQueryプラグイン「desSlideshow」
このプラグインを使うと、画像の外側（あるいは内側）に設置したタイトルラベルにマウスカーソルをもっていくとラベルがびよ～んびよ～んと動くとともに画像が切り替わるアニメーション効果を実装することができます。
もちろん、通常の画像スライドショーも簡単に実装することができます。
スポンサーリンク
デモでタイトルアニメーション付きの画像スライドショーの挙動を確認してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="desSlideshowのデモでーす。">
<title>dotdotdot - jQueryまとめ</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/desSlideshow.js"></script>
<script>
$(function() {
$("#desSlideshow1").desSlideshow({
autoplay: 'enable',
slideshow_width: '800',
slideshow_height: '249',
thumbnail_width: '200',
time_Interval: '4000',
directory: 'images/'
});
});
</script>
</head>
<body>
<h1>desSlideshowのデモでーす。</h1>
<div id="desSlideshow1" class="desSlideshow">
<div class="switchBigPic">
<div>
<a title="" href="#"><img class="pic" src="images/red.png" /></a>
</div>
<div>
<a title="" href="#"><img class="pic" src="images/blue.png" /></a>
</div>
<div>
<a title="" href="#"><img class="pic" src="images/green.png" /></a>
</div>
<div>
<a title="" href="#"><img class="pic" src="images/purple.png" /></a>
</div>
</div>
<ul class="nav">
<li><a href="#">赤だよ～</a></li>
<li><a href="#">青だよ〜</a></li>
<li><a href="#">緑だよ〜</a></li>
<li><a href="#">紫だよ〜</a></li>
</ul>
</div>
</body>
</html>
スポンサーリンク