ホームページ > ウェブフロントエンド > jsチュートリアル > div css レイアウト画像 連続スクロール js実装コード_javascriptスキル

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

WBOY
リリース: 2016-05-16 18:28:08
オリジナル
1138 人が閲覧しました

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互換)
    関連ラベル:
    js
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート