builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

Ajaxの技法:クールな回転スライドの作成

文:Chris Duckett(Builder AU) 翻訳校正:原井彰弘
2008-01-11 11:30:00
  • このエントリーをはてなブックマークに追加

 以下のコードはそのナビゲーションのHTMLだ。bodyタグの終了タグの手前に挿入すればよい。

 お分かりのように、JavaScriptの関数がいくつか新たに必要になる。以下はその関数だ。

function showNext(){
if(stor < maxstor)
stor++;
else
stor=0;

rotateDiv(stor);
}

function stoprot() {
clearTimeout(timeout);
}

function showNext(){
if(stor < maxstor)
stor++;
else
stor=0;

rotateDiv(stor);
}

function showPrev(){
if(stor > 0)
stor--;
else
stor=maxstor;

rotateDiv(stor);
}

function showStoryOne(){
stor=0;
rotateDiv(stor);
}

function showStoryTwo(){
stor=1;
rotateDiv(stor);
}

function showStoryThree(){
stor=2;
rotateDiv(stor);
}

function showStoryFour(){
stor=3;
rotateDiv(stor);
}

 見た目が大きく変わったわけではないが、これらは必要なのである。ここではさらにrotateDiv関数を変更し、現在表示中の記事が何であるかがナビゲーションのリンク上に表示されるようにしよう。コードは以下のようになる。

function rotateDiv(stor){
  var divs = document.getElementById("storyContainer").getElementsByTagName("div");
  for (var i=0; i < divs.length; i++ ) {
    var div = divs[i];
    if ( (div.id != "")) {
if(i != stor){
        div.style.display = "none";
}
else{
div.style.display = "block";
}
    }
  }
  
    var spans = document.getElementById("nav").getElementsByTagName("span");
  for (var i=0; i < spans.length; i++ ) {
    var span = spans[i];
    if ( (span.id != "")) {
if(i != stor)
        span.className = "none";
else
span.className = "selStory";
    }
  }
}

 新しいスタイルがいくつかあるので、それらをスタイルシートに追加しよう。

#nav { 
font-size:12px;
position:absolute;
top:100px;
left:325px;
}

.selStory {
background:#eee;
border:1px solid #777;
}

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]