プロが教える店舗＆オフィスのセキュリティ対策術

CSS + Javascript でスライドショー

解決済

  • 質問者：trink
  • 質問日時：
  • 回答数：2件

手動で画像を順番に表示させる、スライドショーのような表現を作ろうとしています。
色々なサイトを参考に見よう見まねで作成してみたのですが、
途中でうまくいかずに行き詰っております(´・ω・`)

［XHTML］
<body onload="seltab(0)">
<!-- 順番に表示させる内容 -->
<div id="slide" name="slide"><p>1</p></div>
<div id="slide" name="slide"><p>2</p></div>
<div id="slide" name="slide"><p>3</p></div>
<div id="slide" name="slide"><p>4</p></div>
<div id="slide" name="slide"><p>5</p></div>
<!-- ページ切り替え操作部分 -->
<a href="javascript:seltab(-10000)">first</a>
<a href="javascript:seltab(-1)">back</a>
<a href="javascript:seltab(1)">next</a>
<a href="javascript:seltab(10000)">last</a>

［Javascript］
var selected = 0;
function seltab(move) {
o = document.getElementsByName("slide");
selected = selected + move;
if (selected < 0) {selected = 0}
if (selected >= o.length) {selected = o.length - 1}
for (i = 0; i < o.length; i++) {
if (i == selected) {
o[i].style.display = "block";
} else {
o[i].style.display = "none";
}
}
}

このやり方で一応動作はしています（WIN IE + WIN Firefox にて確認）
が、id が同じページ内で重複している点と、div に name を付ける点で、構文チェックに引っ掛かってしまう為、できればそれを回避したいなと思っています。
同じ動作が作れれば、Javascript の処理方法に特に拘りはありません。
お分かりになる方がいらっしゃれば、ぜひぜひご指導お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： talepanda
  • 回答日時：

別に構文チェックにそこまでこだわる必要もないと思いますが、



<html>
<head>
<script type="text/javascript">
<!--
var e=null;
function seltab(move) {
var te=null;
switch(move){
case 0:for(var i=0;i<document.getElementById("orz").childNodes.length;++i)
document.getElementById("orz").childNodes[i].style.display="none";
case -2:te=document.getElementById("orz").childNodes[0];break;
case -1:te=e?e.previousSibling:null;break;
case 1:te=e?e.nextSibling:null;break;
case 2:te=document.getElementById("orz").childNodes[document.getElementById("orz").childNodes.length-1];break;
default:break;
}
if(e && te)e.style.display="none";if(te){te.style.display="block";e=te;}
}
-->
</script>
</head>
<body onload="seltab(0)">
<!-- 順番に表示させる内容 -->
<div id="orz">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>
<div><p>5</p></div>
</div>
<!-- ページ切り替え操作部分 -->
<a href="javascript:seltab(-2)">first</a>
<a href="javascript:seltab(-1)">back</a>
<a href="javascript:seltab(1)">next</a>
<a href="javascript:seltab(2)">last</a>
</body>
</html>

みたいな。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます！
早速試してみたところ、IE では希望通りの動作を確認できました！
HTMLソースも無駄なIDなどが省けてとても嬉しいです。
ただ、残念ながら Firefox では全ての内容が表示されたままで、うまく動作してくれませんでした。
頂いたソースを元に、これから解決策を探してみようと思います。
どうもありがとうございました。

通報する
お礼日時：2006/10/02 20:21

No.2ベストアンサー

  • 回答者： talepanda
  • 回答日時：

FirefoxはchildNodesにテキストノードが入ってくるの忘れてました。



<html>
<head>
<script type="text/javascript">
<!--
var _i=0,ds=null;
function seltab(move) {
if(!ds){ds=document.getElementById("orz").getElementsByTagName("div");for(var i=1;i<ds.length;++i)ds[i].style.display="none";}
var i=move==-2?0:move==-1?_i-1:move==0?0:move==1?_i+1:move==2?ds.length-1:0;
if(i!=_i && 0<=i && i<ds.length){ds[_i].style.display="none";_i=i;ds[_i].style.display="block";}
}
-->
</script>
</head>
<body onload="seltab(0)">
<!-- 順番に表示させる内容 -->
<div id="orz">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>
<div><p>5</p></div>
</div>
<!-- ページ切り替え操作部分 -->
<a href="javascript:seltab(-2)">first</a>
<a href="javascript:seltab(-1)">back</a>
<a href="javascript:seltab(1)">next</a>
<a href="javascript:seltab(2)">last</a>
</body>
</html>

でおｋ
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！
無事に Firefox でも動作しました！
教えて頂くだけで終わらせずに、教えて頂いたスクリプトの中身について、これからきちんと勉強していこうと思います。
大変貴重な情報をご提供頂き、ありがとうございました！

通報する
お礼日時：2006/10/02 22:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報