横スライド７■横スクロール左右ボタン

見本として１番目と２番目にリンク付き。ボタンクリックで停止、方向変更します。
<!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;/*★中央配置(上下、左右）。お好みで*/
overflow:hidden;/*★必須。bx領域からはみ出た分は非表示*/
width:100%;/*★スライド横幅。お好みで*/
height:245px;/*★スライド縦幅。画像縦幅と同じ*/
}

/*★ボタン位置指定。お好みで*/
.bt{text-align:center;}/*★中央位置指定*/
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<br>
<p style="text-align:center;">見本として１番目と２番目にリンク付き。<span style="color:red;">ボタンクリックで停止、方向変更</span>します。</p>

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

<div class="bt"><!--★ここからボタン指定-->
<input type="button" value="<<" title="左へ流れる" id="bt1">
<input type="button" value="□" title="停止" id="bt2">
<input type="button" value=">>" title="右へ流れる" id="bt3">
</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 wh=370;        //★画像の横幅。単位px
var speed=20;      //★原本100。流れる速度。数値が小さいほど速い。

//★画像とリンクの同時指定。増減可能。["画像","リンク"];　の２個をこの順番で記述。リンクが無い時は["画像",""];で
var ga=new Array();
ga[n++]=["gy1.jpg","http://www.google.com"];
ga[n++]=["sf7.jpg","http://www.yahoo.com"];
ga[n++]=["gy3.jpg",""];
ga[n++]=["gy5.jpg",""];
ga[n++]=["sf6.jpg",""];
ga[n++]=["muka22.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;
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へ変更
mass.style.left=imgps+"px"; 
setTimeout(slide,speed);
}
/*■ie11ではdocument.getElementByIdを省略したら動作しない*/
document.getElementById('bt1').onclick=function (){flag_c=1;}//左へ流れる
document.getElementById('bt2').onclick=function (){flag_c=2;}//停止
document.getElementById('bt3').onclick=function (){flag_c=0;}//右へ流れる
slide();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
横スライド７■横スクロール左右ボタン 最終修正日 : 2016/03/23

　横スライド７■横スクロール左右ボタン　　　　最終修正日 : 2016/03/23
