横スライド６■横スクロール左右選択

見本として１番目と２番目にリンクを付けています。画像マウスオンで停止します

●2016/03/20：即時関数で囲んで、グローバル変数を消しました。
横スクロールで画像が流れるJavaScriptです。
画像マウスオンでスクロールが停止し、スライド画像にはリンクも指定できます。
そしてJavaScriptの中の指定で、スクロールの左右方向を簡単に変更できます。
見本は「mode=0」指定なので画像が右から左へ流れますが、「mode=1」にすると逆に左から右へ画像が流れます。

前回掲載分を改造しました。
このJavaScriptは１枚ごとの画像自体への装飾（個別の枠線指定や画像間隔指定等）が少し難しかったので、画像同サイズ使用にして、装飾無しのピッタリスクロールのみにしました。

原本はインラインフレーム(iframe)を使用していて、２枚のhtmlを利用します。
それを１枚にまとめ、リンク設定を付け、画像停止と再開がボタンクリックだったのを画像マウスオンに改造しました。
原本はHIMAJINから。

2016/03/21：画像とリンクをまとめ記述に変更。
2016/03/21：表示領域が2で割り切れない時があるので、移動量imgpsの2を1へ変更

<!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"><!--
#bx{
position:relative;/*★基準位置指定。必ずposition:●●;を使用して指定すること*/
margin:10px auto 50px;/*★中央配置(上、左右、下）。お好みで*/
overflow:hidden;/*★必須。bx領域からはみ出た分は非表示*/
width:100%;/*★スライド横幅。お好みで*/
height:245px;/*★スライド縦幅。画像縦幅と同じ*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<br>
<p style="text-align:center;">見本として１番目と２番目にリンクを付けています。<span style="color:red;">画像マウスオンで停止</span>します</p>

<!--★コピーここから。下の１行がスライドショー位置指定。id="bx"は必須-->
<div id="bx"></div>

<script type="text/javascript"><!--
/*==================================================================================
画像横スクロール By  HIMAJIN(http://himajin.moo.jp/java/imgch/frame3.html)
★iframe使用の2枚のhtmlを1枚にし、リンク設定追加。 左右方向選択追加　2016/03/23
====================================================================================*/
(function (){ var n=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var mode=0;        //★画像の流れる向き指定。0 で右から左へ流れる。1で逆に左から右へ流れる
var wh=370;        //★画像の横幅。単位px
var speed=20;      //★原本100。流れる速度。数値が小さいほど速い。

//★画像とリンクの同時指定。増減可能。["画像","リンク"];　の２個をこの順番で記述。リンクが無い時は["画像",""];で
var ga=new Array();
ga[n++]=["sf1.jpg","http://www.google.com"];
ga[n++]=["sf5.jpg","http://www.yahoo.com"];
ga[n++]=["muka22.jpg",""];
ga[n++]=["sf8.jpg",""];
ga[n++]=["sf7.jpg",""];
ga[n++]=["sf9.jpg",""];

var myurl="";      //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

//指定はここまで-----------------------------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga[p].length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p][0];}
ga=ga.concat(ga);//配列を２倍連結。2倍しないと最後が空白になる
var len2=ga.length;
var setwh=(wh*len2)/2;
var flag_c=1,imgps=0;
var sss="<div id='mass' style='position:absolute;white-space:nowrap;'>";/*方向転換ができなくなるのでtopやleftの0指定はしない*/
for (var i=0; i<len2; ++i) {
sss+=(ga[i][1]!="")?"<a href="+ga[i][1]+" target='_new'><img src="+myurl+ga[i][0]+"></a>":"<img src="+myurl+ga[i][0]+">";
}
sss+="</div>";
document.getElementById("bx").innerHTML=sss;
bx.onmouseover=function (){flag_c=2;}
bx.onmouseout=function (){flag_c=1;}
function slide(){
if(!flag_c){ if(imgps >= 0){imgps=-setwh;} imgps+=1;}//表示領域が2で割り切れない時があるので2を1へ変更
else if(flag_c===1){ if(imgps <= -setwh){imgps=0;} imgps-=1;}//表示領域が2で割り切れない時があるので2を1へ変更
if(mode===0){mass.style.left=imgps+"px";}//■0で右から左へ画像が流れる  
else {mass.style.right=imgps+"px";}//■1(実は0以外の数字)で左から右へ画像が流れる
setTimeout(slide,speed);
}
slide();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

横スライド６■横スクロール左右選択 最終修正日 : 2016/03/23

　横スライド６■横スクロール左右選択　　　　最終修正日 : 2016/03/23