縦スライドショー４

文章が下から上へ移動するJavaScriptを改造。リンクも可能。画像の下にコメント付き。
最後の画像のみ、見本にリンクが入ってます。

文章使用の下から上への原本はその他８ ■実用■　下から上のティッカーから。
文章を画像に改造した下から上へのコメントが下側に付いた見本は縦スライドショー３■縦へ■　下から上へスライドから。
文章を画像に改造した下から上へのコメントが右側に付いた見本は縦スライドショー５■縦へ■　下から上スライド・右コメ付から。

文章を画像に改造した右から左へのコメント無しの見本は横スライドショー１１■横へ■　右から左へスライドから。
文章を画像に改造した右から左へのコメント付きの見本は横スライドショー１２■横へ■　右から左へスライド。コメ付きから。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>縦スライドショー４</title>


<!--★ここからコピー-->
<style type="text/css">
<!--
#waku{
/*★absolute;(絶対位置指定)でもrelative;(相対位置指定)でも可。位置指定のしやすい方で。どちらか必須*/
position:relative;/*★ここから以下3行の指定で中央配置*/
margin:30px auto;/*★上下30pxの隙間。左右は自動指定で中央になる。auto以外の数値は好み*/
width:500px;/*★画像の横幅。widthを指定しないと上記のautoが無効になる*/
height:370px;/*★画像の縦幅330px＋コメントの縦幅40px＝370px*/
overflow:hidden;/*★はみ出た部分を表示しない*/
border:solid 6px #00f;/*★枠線青色*/
}

#ulArea div img{vertical-align: bottom;}/*★html5で画像と画像の隙間をなくす*/

#ulArea div p{
display:table-cell;/*★この指定はコメントの文字の位置指定やpタグの自動改行の防止用*/
text-indent:1em;/*★コメントを左側から１字下げる*/
width:500px;/*★コメントの横幅(画像の横幅と同じ)*/
height:40px;/*★コメントの縦幅。好みで*/
vertical-align:middle;/*★コメントの上下中央位置指定。display:table-cell指定があると使用可能*/
background:#ff0;/*★コメントの背景色　黄色*/
border-top:solid 3px #00f;/*★コメントの上側に枠線指定。画像とコメントの区切り線。青色*/
-moz-box-sizing: border-box;/*★HTML5でborderをはみ出させないため。ブラウザFirefox用*/
box-sizing: border-box;/*★HTML5でborderをはみ出させないため*/
}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>

<body>
<br><br><br>

<!--★ここからコピー。id="ticKer"とid="ulArea"を必ず記述-->

<!-- ★画像リスト。増減可能。リンクも可能。最終行見本 -->
<div id="waku">
<div id="ulArea">
<div><img src="pt34.jpg"><p>1/5　スードリー城の牧場</p></div>
<div><img src="pt35.jpg"><p>2/5　スードリー城Ａ</p></div>
<div><img src="pt36.jpg"><p>3/5　スードリー城Ｂ</p></div>
<div><img src="pt37.jpg"><p>4/5　リナリアの花</p></div>
<div><a href="http://javascript123.seesaa.net/" target="_new"><img src="pt42.jpg"></a><p>5/5　野生のウサギ</p></div>
</div>
</div>
<!--★ここまでコピー。下にもコピーがあります-->


<div style="padding:30px 15%;">
<p>文章が下から上へ移動するJavaScriptを改造。リンクも可能。画像の下にコメント付き。<br>
最後の画像のみ、見本にリンクが入ってます。<br>
<br>
文章使用の原本は<a href="../hoka/hoka_moji8.html">その他８ ■実用■　下から上のティッカー</a>から。<br>
文章を画像に改造したコメント無しの見本は<a href="slide_t3.html">縦スライドショー３■縦へ■　下から上へスライド</a>から。</p>
</div>

<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*********************************************
参考サイト: http://javascript123.seesaa.net/
★テキストを画像に変更。コメント付きへ。 2014/12/22
**********************************************/
var  upSpeed=5;   //★画像のスライド速度。大きいほど遅い。原本15
var  delay =3000; //★次の画像に切り替わるまでの静止時間。1000=1秒
var  imgD=370;    //★動くdiv(画像だけならimg)の１個の幅。上下移動なら高さ。画像縦幅330px＋コメント縦幅40px

with (ulArea.style)position="absolute",top=0+"px",left=0+"px";

function innScroll(imgD, upSpeed, delay){
   msec = upSpeed; // スクロール時間
   numTL = parseInt(ulArea.style.top);     //数値文字列を整数に変換
　　if (numTL > -imgD){                    /*top位置が -画像高さにならない間は*/
　　　ulArea.style.top = (numTL-1)+"px";}  //top位置を -1px 上へ
　　else{ ulArea.style.top = 0+"px"; 
          cngLi();} // 次の画像と交代
	　　　　　
   if(numTL==0){msec = delay;}             //静止時間 現在の画像やメッセージを待機
   setTimeout("innScroll("+imgD+","+upSpeed+","+delay+")", msec);
}

function cngLi(){                                 /*画像の移動*/
     obList = ulArea.getElementsByTagName("div"); //id="ulArea" の中のdivタグ名を持つ要素のリスト
     elm = obList[0];                             //最上部の "div"要素
     ulArea.appendChild(elm);                     //elm を子ノードとしてid="ulArea" の中の末尾に移動する。
}
window.onload =innScroll(imgD, upSpeed, delay);
// -->
</script>
<!--★ここまでコピー。終わり-->

<br><br>
</body>
</html>

縦スライドショー４■縦へ■ 下から上へスライド・コメ付 UP日時 : 2014/12/22

縦スライドショー４■縦へ■　下から上へスライド・コメ付　　　　UP日時 : 2014/12/22