WEB制作に関する質問です。コンテンツをスライドに

質問

ボタンをクリックするとtableの部分を垂直方向にスライドさせて切り替えたいのですが　なかなか、うまくいきません。
こんな感じかなと思って、つくったのですが、まったく作動しません。
何をどうすればいいか分かりません。
どなたか、教えて下さい。
javascriptは少し分かるぐらいです。

よろしくお願いします。

コードは↓ 下のクリック画像だけ指定してあります。
html

<div id="main_left">
　<h2>見出し</h2>
　<img src="image/cicletop.jpg" width="33" height="33" /><!-- 上のクリックボタン -->

　<div id="shuraider">
　　<table name="shuraid1" id="shuraid1">
　　　<tr><td colspan="2">aaaaaa</td></tr>
　　　<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr>
　　　<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10"
onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'"
onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr>
</table>

<table name="shuraid2" id="shuraid2">
<tr><td colspan="2">aaaaaa</td></tr>
<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr>
<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10"
onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'"
onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr>
</table>

<table name="shuraid3" id="shuraid3">
<tr><td colspan="3">aaaaaa</td></tr>
<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr>
<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10"
onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'"
onclick="document.menu10.src='image/amenu.gif'" /></td>
<td>aaaaaaaaaaaaaa</td></tr>
</table>

<table name="shuraid4" id="shuraid4">
<tr><td colspan="2">aaaaaa</td></tr>
<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</tr>
<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10"
onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'"
onclick="document.menu10.src='image/amenu.gif'" /></td>
<td>aaaaaaaaaaaaaa</td></tr>
</table>
</div><!-- end shuraider -->

<img src="image/ciclebottom.jpg" width="33" height="33" name="shuraid_botton" id="shuraid_botton" onclick="shuraido

()" /><!-- 下のクッリックボタンでここをクリックするとtableを切り替えたい -->
</div><!-- end main_left -->

ここからcss

#main_left{
width: 339px;
}
#main_left h2{
font-size: 18px;
font-weight: bold;
color: #ffffff;
width: 339px;
line-height: 2em;
letter-spacing: 1em;
background-image: url(../image/h2.jpg);
background-color: #0F9;
margin: 0;
}
#shuraider{
width: 337px;
height: 120px;
overflow: hidden;
}

ここからjavascript

var i=1;
function shuraido(){
if(i==1){
document.src="shuraid2";
i=2;
}
else if(i==2){
document.src="shuraid3";
i=3;
}
else if(i==3){
document.src="shuraid4";
i=4;
}
else{
document.src="shuraid1";
i=1;
}
}
</script>

回答No.6

fujillin · ベストアンサー

＞水平にスクロールさせる場合はどうすればよろしいでしょうか？
要領は同じです。縦になっていたものを横に考えればよいだけです。

具体的には、
・表示要素（パネルの部分）を横並びにしておく
・要素の表示位置を上下に移動（top）していたものを、左右(left）で制御する
でほとんどいけると思います。
あとは要素の高さで計算していたものは、当然ながら、幅で計算するというくらいでしょうか。

回答No.5

fujillin

#4です。

＞addEventListenern はどのように入力してどのように、使えばいいでしょうか？
失礼しました。
addEventListenernはタイポです。
addEventListenerが正です。（IEはattachEvent）
使い方は検索してみてください。

お礼

ありがとうございます。
調べてみます。
何度も質問、申し訳ないのですが、教えて頂いたコードを応用して水平にスクロールさせる場合はどうすればよろしいでしょうか？

回答No.4

fujillin

#1、#3です。

＞html内に<p onload="～()"> </p>
＞で出来るでしょうか？
『<p onload="～()"> </p>』という記述方法は知りませんが、window.onloadやbodyタグのonload、あるいはaddEventListenernなどを利用して実行すれば可能です。

お礼

ご回答ありがとうございます。
body.onloadとwindows.onloadを試しても、出来ませんでした。

addEventListenern はどのように入力してどのように、使えばいいでしょうか？

回答No.3

fujillin

#1です。

＞教えて頂いたコードでスクロールさせる早さは調節出来るでしょうか？
あくまでも仕組みのサンプルなので調節し易くは作ってありませんが、もちろん可能です。
アニメーションはパラパラ漫画と同じ仕組みなので、「1回表示するごとに進む量」と「表示を入替える間隔」で調節できます。

アニメーション（=スライド）させている部分は、スクリプトの真ん中あたりの
　slide.id = setInterval(function(){～～　ですが、

「1回表示するごとに進む量」に該当する部分は、その直前の
　def = end>top?2:-2;
で、単位はピクセルです。
現在は1回で2ピクセル移動するようにしています。

「表示を入替える間隔」にあたる部分は、少し下の
　}, 15);
の部分で、単位はmsec（千分の一秒）です。
現在は15/1000秒ごとに表示を入替えるようにしています。
この数字はあまり小さくしても処理必要な時間などもあるので正確にその通りになるとは限りません。

お礼

ありがとうございます。
上手く出来ました。

補足

最後の質問なのですが、下のjavascriptを外部ファイルから読み込みしたいのですが、その場合はhead内でリンクさせ。
html内に<p onload="～()"> </p>
で出来るでしょうか？

回答No.2

n_a_o_11

今流行のjqueryを使ってみたら。
http://bxslider.com/

下記参照
http://www.geocities.jp/n_a_o11/bxSlider.html

回答No.1

fujillin

回答がないみたいなので…

方法はいろいろあるでしょうが、表示する部分を { overflow:hidden; } などで限定しておいて、その中で縦に連続して表示されている要素の表示位置を上下にずらしてあげるのが簡単かも。

以下に、原理的なサンプルを。
表示枠に当たる部分が<div class="slide_panel">で、<ul id="panels">の表示位置を上下することでスライドしています。
ライブラリ（jqueryとか）を使えば、もっと簡略化した記述にできることでしょう。
（サンプルなので、対象のidとかは決め打ちになっています）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#wrapper, #wrapper *{ padding:0; margin:0; }
#wrapper{ width: 340px; text-align:center; border:1px solid #aaa; }
#wrapper h2{ font-size:18px; color:#fff; line-height:2em; background-color:#0f9; }
#slide_up, #slide_down { width:1.8em; height:1.8em; }

.slide_panel, #panels li.panel { width:340px; height:120px; text-align:left; }
.slide_panel { position:relative; overflow: hidden; }
#panels, #panels li.panel { list-style-type:none; }
#panels { position:absolute; }
#panels li.panel { overflow:auto; }
</style>
</head>
<body>

<div id="wrapper" onclick="slidePanel(event)">
<h2>見出し</h2>
<button type="button" id="slide_up">↑</button>
<div class="slide_panel">
<ul id="panels">
<li class="panel">内容1</li>
<li class="panel">
内容2-1<br>内容2-2<br>内容2-3<br>内容2-4<br>
内容2-5<br>内容2-6<br>内容2-7<br>内容2-8
</li>
<li class="panel">内容3</li>
<li class="panel">内容4</li>
<li class="panel">内容5</li>
<li class="panel">内容6</li>
</ul>
</div>
<button type="button" id="slide_down">↓</button>
</div>

<script type="text/javascript">
<!--
var slidePanel = function(evt){
var t = evt.target || evt.srcElement;
var def, index, slide = slidePanel;
def = t.id=="slide_up"?-1:t.id=="slide_down"?1:0;
index = slide.index + def;
if(def==0 || slide.n==0 || 0>index || index>=slide.n) return;

slide.index = index;
if(slide.id) clearInterval(slide.id);
var s = slide.style, end = -slide.elms[index].offsetTop;
var top = parseInt(s.top);
def = end>top?2:-2;

slide.id = setInterval(function(){
top += def;
var flag = (def>0 && top>=end) || (0>def && end>=top);
s.top = (flag?end:top) + "px";
if(flag){
clearInterval(slide.id);
slide.id = null;
}
}, 15);
}

slidePanel.init = function(){
var i, elm, e, c, t = this;
t.elms = [], t.index = 0, t.id = null;
elm = document.getElementById("panels");
if(!elm) return;

t.style = elm.style;
t.style.top = "0px";
elm = elm.childNodes;
for(i=0; e=elm[i++];)
if((c=e.className) && c.match(/\bpanel\b/))
t.elms.push(e);

t.n = t.elms.length;
}
slidePanel.init();
//-->
</script>
</body>
</html>

お礼

回答、ありがとうございます。
教えて、頂いたコードを自分なりにカスタムして、
コンテンツを縦にスライドすることに成功しました。

補足

度々、質問すみません。
教えて頂いたコードでスクロールさせる早さは調節出来るでしょうか？