助けてください… jQuery 左右に動くスライド

仕事で必要になったのですが、作成方法がわからず非常に困っております。

例サイト
http://www.daiwahouse.co.jp/jutaku/merit/solar/i …

上記URLのサイトにあるスライドショー？を作成したいと思っております。

・自動再生はしない。
・表示するとTOP画像、画面端をクリックで左右にスクロールする。
・下部にコントロールボタンを設置して上部と連動する。

例サイトのような複雑な中身では作らず、上部はjpg画像をそれぞれ使用します。

----------

お分かりになる方、または似たようなサンプルURLでも構いません！
何か、何かヒントを下さい！！

jQueryの設置等は、別件で利用した事がありますので、
質問内容のような「ソース」を教えてください！

jQueryのサイトを見てまわったのですが、どれも素晴らしいサンプルばかりで……
私には改変することが出来ませんでした…

簡単でいいんです。

簡単な動きだけでいいです。

明日までに何とか形にして、提出する為、焦りまくっております！
深夜まで調べ倒して、何とかしたいのですが…

もう藁にもすがる想いで質問致します。

どうか、どうか教えてください！よろしくお願い致します！！

※添付画像が削除されました。

No.1 ベストアンサー 回答者： nekomikekamo 回答日時： 2011/10/08 22:29

適当ですが、文字でのスクロールサンプルですが、画像でも一緒だと思います。

幅を360pxで計算していますが、そこは自由に変えてもらってOKです。
[HTML部]

<div id="gallery">
<ul id="photos">
<li class="photo1">photo1</li>
<li class="photo2">photo2</li>
<li class="photo3">photo3</li>
<li class="photo4">photo4</li>
<li class="photo5">TOP</li>
<li class="photo6">photo6</li>
<li class="photo7">photo7</li>
<li class="photo8">photo8</li>
<li class="photo9">photo9</li>
</ul>
<ul id="navigation">
<li class="prev">prev</li>
<li class="next">next</li>
</ul>
</div>
<ul id="control">
<li class="photo1">1</li>
<li class="photo2">2</li>
<li class="photo3">3</li>
<li class="photo4">4</li>
<li class="photo5">TOP</li>
<li class="photo6">6</li>
<li class="photo7">7</li>
<li class="photo8">8</li>
<li class="photo9">9</li>
</ul>
[JS部(jQueryです)bodyの一番最後に追加]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6. …
<script type="text/javascript">
(function(){
var PHOTO_WIDTH = 360,
TOP = 4,
display_now = TOP,
move = function(){
display_now === 0 ? jQuery("#navigation .prev").css("display","none") : jQuery("#navigation .prev").css("display","inline");
display_now === 8 ? jQuery("#navigation .next").css("display","none") : jQuery("#navigation .next").css("display","inline");
jQuery("#gallery ul").animate({left:-display_now * PHOTO_WIDTH + "px"},1000);
};

//control
jQuery("#control li").click(function(){
display_now = this.className.match(/\d+/) - 1;
move();
});
//next or prev
jQuery("#navigation li").click(function(){
this.className === "prev" ? display_now -= 1 : display_now += 1;
if(display_now < 0 || display_now > 8)display_now = TOP;
move()
});
}());
</script>
[参考CSS]
*{margin:0;padding:0;}
li{list-style:none;}
#gallery {position:relative ;width:360px; height:270px;overflow:hidden;}
#gallery ul#photos{position:relative;top:0;left:-1440px;width:3240px;overflow:hidden;}
#gallery ul#photos li{float:left;width:360px; height:270px;}
#gallery ul#navigation li{border:1px solid #ccc;}
#gallery ul#navigation li.prev{position:absolute;left:0;top:130px;z-index:2;}
#gallery ul#navigation li.next{position:absolute;right:0;top:130px;z-index:2;}
#gallery li.top{z-index:1}
#control {overflow:hidden;}
#control li{float:left;width:30px;padding:0 5px;text-align:center;border:1px solid #ccc;}

この回答へのお礼

nekomikekamo　様

出来た！出来た！！出来ました！！！
ありがとうございます！！

ありがとうございます。゜（´Д｀）゜。

もう今、オフィスで一人ガッツポーズをしています！

ああ…こんな事ってあるんですね…本当に、
何とお礼を申し上げれば良いのかわかりません……
後は作成してある画像に差し替えて、完成です！！！

本当にありがとうございました！！
何度言っても言い足りません…
ああ！もう直接お礼を申し上げに行きたい気持ちです。
ありがとう、ございました……

お礼日時：2011/10/08 23:25