横スライドショー１２

文章が下から上へ移動する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:50px auto;/*★上下50pxの隙間。左右は自動指定で中央になる。auto以外の数値は好み*/
width:499px;/*★画像の横幅。widthを指定しないと上記のautoが無効になる。右側の隙間が気になる時は(画像横幅-1px)で指定。画像実寸500px-1px=499px。JavaScriptのソースは500pxのままで*/
height:370px;/*★画像の縦幅330px＋コメントの縦幅40px＝370px*/
overflow:hidden;/*★はみ出た部分を表示しない*/
border:solid 6px #b72;/*★枠線　茶色*/
}

#ulArea div{display:table-cell;}/*★JavaScriptのソース内で#ulAreaにdisplay:tableを指定済み。横並び指定*/

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

#ulArea div p{
display:table-cell;/*★コメントの位置指定や、pタグの改行を防止するため。html4ではborderにも効くがhtml5ではだめ*/
text-indent:1em;/*★コメントを左側から１字下げる*/
width:500px;/*★コメントの横幅(画像の横幅と同じ)*/
height:40px;/*★コメントの縦幅。好みで*/
vertical-align:middle;/*★コメントの上下中央位置指定。display:table-cell指定があると使用可能*/
background:#000;/*★コメントの背景色　黒色*/
border-top:double 6px #e91;/*★コメントの上側に枠線指定。画像とコメントの区切り線。オレンジ色の２重線*/
-moz-box-sizing: border-box;/*★HTML5でborderやpaddingをはみ出させないため。ブラウザFirefox用*/
box-sizing: border-box;/*★HTML5でborderやpaddingをはみ出させないため*/
color:#fff;/*★コメントの文字色　白*/
font-weight:bold;/*★太字*/
}
-->
</style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>

<body>

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

<!-- ★画像リスト。増減可能。リンクも可能。最終行だけリンク付きの見本 -->
<div id="waku">
<div id="ulArea">
<div><img src="pt38.jpg"><p>1/5　クライスチャーチ</p></div>
<div><img src="pt39.jpg"><p>2/5　カラスアゲハ</p></div>
<div><img src="pt40.jpg"><p>3/5　ラナンキュラス</p></div>
<div><img src="pt41.jpg"><p>4/5　ハムステッドの建物</p></div>
<div><a href="http://javascript123.seesaa.net/" target="_new"><img src="pt43.jpg"></a><p>5/5　スコティッシュフォールドの猫</p></div>

</div>
</div>
<!--★ここまでコピー。下にもコピーがあります-->


<div style="padding:30px 10%;">
<p>文章が下から上へ移動するJavaScriptを改造しました。<br>
文章を画像に改造し、さらに「上から下へ」の移動を「右から左」の移動へ改造した、コメント付きのスライドショーです。<br>
最後の画像のみ、見本にリンクが入ってます。</p>
</div>

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

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

function innScroll(imgD, upSpeed, delay){
   msec = upSpeed; // スクロール時間
   numTL = parseInt(ulArea.style.left);     //数値文字列を整数に変換
　　if (numTL > -imgD){                    /*top位置が -画像高さにならない間は*/
　　　ulArea.style.left = (numTL-1)+"px";}  //top位置を -1px 上へ
　　else{ ulArea.style.left = 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/28

横スライドショー１２■横へ■　右から左へスライド・コメ付　　　　UP日時 : 2014/12/28