横スライド３■横スクロール右→左

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

●2016/03/22：即時関数で囲んで、グローバル変数を消しました。
横スクロールで画像が流れるJavaScriptです。
画像マウスオンでスクロールが停止し、スライド画像にはリンクも指定できます。
画像指定やリンク指定はJavaScriptのソースの中ではなく、HTMLのbodyの中でします。

見本では同一サイズの画像を使用しましたが、サイズ違いの画像でも大丈夫です。
画像１枚ずつの装飾（枠線や間隔指定）もHTMLの中でできます。
サイズ違いや装飾の見本は■横スライド３-１■横スクロール右→左サイズ違い■から。

原本を少し簡略化して、画像マウスオンで停止するように改造しました。
原本は教えて!goo の「babu_baboo さんの回答」から。

<!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"><!--
#menuX{
overflow:hidden;/*★はみ出した部分は表示しない*/
position:relative;/*★基準位置指定。必ずposition:●●;を使用して指定すること*/
margin:10px auto 50px;/*★中央配置(上、左右、下）。お好みで*/
width:900px;/*★スライド表示横幅。お好みで。画像の大きさや数と比較して広過ぎると空白が出ます*/
height:200px;/*★スライド表示縦幅。同サイズの画像でない場合は、一番大きな画像の縦幅*/
}

#menuX div{ display:table-cell; }/*★横並び指定*/

/*★スライド画像の装飾はここで。画像の縦横指定は必須。縦横指定がないと動作しないブラウザ有り。画像サイズが違う分は、bodyで個別に指定*/
#menuX div img{
width:267px;/*★必須。画像横幅*/
height:200px;/*★必須。画像縦幅*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

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

<!--★コピーここから。スライド画像名、リンク、画像サイズが違う時のサイズ指定等は、ここで記述。増減可能-->
<div id="menuX">
<div><a href="http://www.yahoo.co.jp" target="_new" title="yahoo"><img src="muka2s.jpg" alt=""></a></div>
<div><a href="http://www.google.co.jp" target="_new" title="google"><img src="muka6.jpg" alt=""></a></div>
<div><img src="muka7.jpg" alt=""></div>
<div><img src="muka8.jpg" alt=""></div>
<div><img src="muka10.jpg" alt=""></div>
<div><img src="muka11.jpg" alt=""></div>
</div>

<script type="text/javascript"><!--
/*=============================================================================================
横スクロールのスライド By 教えて！goo　http://oshiete.goo.ne.jp/qa/5206671.html?from=recommend　(作成者：babu_baboo)
マウスオン停止の参考サイト: (http://www.dynamicdrive.com)* Conveyor belt slideshow script- c Dynamic Drive DHTML code library 
★原本を簡略化してマウスオン停止追加。　2016/03/22
===============================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var speed=20;//★スライドの速度。小さいほど速い。原本30
var step=1;//★スライド移動幅。大きいほど速い。原本1。0にすると停止するので0以外で指定

//指定はここまで。他の指定はHTMLで-----------------------------------------------------------
var cpstep=step;
function Mover () {
　var dv=document.getElementById('menuX').getElementsByTagName( 'div' );
　var ct, o, s, x, xm = 0;
  　for (ct = 0; o = dv[ ct++ ]; ) {
　　s = o.style;
　　s.position = 'absolute';
　　s.left = xm + 'px';
　　xm += o.offsetWidth-step;//■一巡した時に隙間が出るのを防止するため-step追加
　}
　  function LOOP () {
　　 for (ct = 0; o = dv[ ct ]; ct++) {
　　　x = o.offsetLeft-cpstep;
　　　if (x + o.offsetWidth < 0) x= xm-o.offsetWidth;
　　　o.style.left = x + 'px';
　　}
　　var tm=setTimeout(LOOP,speed);
　}
　LOOP();
}
menuX.onmouseout=function (){cpstep=step;}//自動
menuX.onmouseover=function (){cpstep=0;}//停止
Mover();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

横スライド３■横スクロール右→左 最終修正日 : 2016/03/22

　横スライド３■横スクロール右→左　　　　最終修正日 : 2016/03/22