div css レイアウト画像連続スクロール js実装コード_javascriptスキル-jsチュートリアル-php.cn

div css レイアウト画像連続スクロール js実装コード_javascriptスキル

WBOY

リリース： 2016-05-16 18:28:08

オリジナル

1096 人が閲覧しました

HTML レイアウトコード

コードをコピーコードは次のとおりです:

无标题文档

toleft("demo","demo1","demo2",30,"onedemo");
//toright("demo0","demo11","demo22",20,"ti2");

js核心代码

复制代代码如下:

//调用右滚動
//toleft("demo","demo1","demo2",30,"ti1")
//调用右滚動
//toright("demo0" ,"demo11","demo22",20,"ti2")

function $(id)
{
return document.getElementById(id)
}

//左方向の動作関数、demo には demo1 と demo2 が含まれ、speed は動作速度、flag ネットワーク内には異なる任意の文字が複数回設定されます。 🎜>{
デモ=$(デモ);
デモ1=$(デモ1);
demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
demo.scrollLeft-=demo1.offsetWidth
}
else
{
demo.scrollLeft
}
}
flag=setInterval(Marquee,speed)
demo.onmouseover=function()
{
clearInterval(flag);
}
demo.onmouseout=function()
{
flag=setInterval(Marquee,speed);
}
}

//右方向の動作関数、demo には demo1 と demo2 が含まれ、speed は動作速度、フラグネットワーク内には異なる任意の文字が複数回設定されます。
関数 toright(demo,demo1,demo2,speed,flag)
{
demo=$(demo);
デモ1=$(デモ1);
demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo.scrollLeft<=0)
{
デモ.scrollLeft=demo2.offsetWidth
}
else
{
demo.scrollLeft--
}
}
flag=setInterval(Marquee,speed)
デモ。 onmouseover=function()
{
clearInterval(フラグ);
}
demo.onmouseout=function()
{
flag=setInterval(Marquee,speed);
}
}

さらに多くの機能が必要な場合は、次のコンテンツを参照してください:
JavaScript の 4 方向画像スクロール効果
JavaScript の上下左右のシームレスなスクロールと固定高さと固定幅ポーズエフェクト(ie/ff互換)