前の記事に続けて、8種類のJSフォーカスカルーセル（前の記事）を完全に実装するために学習してください。参考までに、特定のコンテンツは次のとおりです。
5.シームレスに上下にスクロールするタイムリーなスクロール
アイデア：
1。アイデア1： ULのコピーを1つコピーしますが、スクロール距離の半分まで位置に戻ります。 （大規模なWebサイトはわずかに低いパフォーマンス）;
2。アイデア2：相対的なポジショニングを通じて、最初のLiを最後まで移動し、ULとLIを位置に戻します。
window.onload = function（）{var obox = document.getElementById（ 'box'）; var oul = document.getElementById（ 'ul'）; var ali_u = oul.getelementsbytagname（ 'li'）; var oool = document.getElementById（ 'ol'）; var ali_o = ool.getelementsbytagname（ 'li'）; var liheight = ali_u [0] .offsetheight; var inow = 0; //ボタンの値var inow2 = 0; // surloll var timer = null; for（var i = 0; i <ali_o.length; i ++）{ali_o [i] .index = i; ali_o [i] .onmouseover = function（）{for（var i = 0; i <ali_o.length; i ++）{ali_o [i] .classname = ''; this.className = 'Active'; //関係の構築：非常に重要なinow = this.index; inow2 = this.index; startmove（oul、{top：-this.index*liheight}）; }}; } Timer = setInterval（Torun、2000）; obox.onmouseover = function（）{clearInterval（タイマー）; }; obox.onmouseout = function（）{timer = setInterval（Torun、2000）; }; function torun（）{if（inow == 0）{// restore liおよびplace ul ali_u [0] .style.position = 'static'; oul.style.top = 0; // inow2をinow2 = 0に復元することを忘れないでください。 } if（inow == ali_o.length-1）{//最初のliを最後のinow = 0に移動します。 ali_u [0] .style.position = 'relative'; ali_u [0] .style.top = ali_u.length*liheight+'px'; } else {inow ++; } inow2 ++; for（var i = 0; i <ali_o.length; i ++）{ali_o [i] .classname = ''; } ali_o [inow] .classname = 'Active'; startmove（oul、{top：-inow2*liheight}）; }};複製画像：
6.左右の間のシームレスな切り替えの効果
アイデア：
1。絶対位置：最初のLIを除くすべてのLIは右に配置され、インデックス値を現在のインデックスと比較し、表示するLIの位置を見つけます。
2.「スイッチ」または「時間間隔」を追加して、モーションスイッチング周波数を制御します！
window.onload = function（）{var oul = document.getElementById（ 'ul'）; var ali_u = oul.getelementsbytagname（ 'li'）; var oool = document.getElementById（ 'ol'）; var ali_o = ool.getelementsbytagname（ 'li'）; var liwidth = ali_u [0] .offsetwidth; var inow = 0; var bbtn = true; //（var i = 1; i <ali_u.length; i ++）{ali_u [i] .style.left = liwidth+'px'; } for（var i = 0; i <ali_o.length; i ++）{ali_o [i] .index = i; ali_o [i] .onmouseover = function（）{if（bbtn）{bbtn = false; for（var i = 0; i <ali_o.length; i ++）{ali_o [i] .classname = ''; } this.className = 'Active'; //左および右シフトの裁判官（inow <this.index）{// li ali_u [this.index] .style.left = liwidth+'px'; //現在のliを移動してstartmove（ali_u [inow]、{left：-liwidth}）; } else if（inow> this.index）{ali_u [this.index] .style.left = -liwidth+'px'; startmove（ali_u [inow]、{left：liwidth}）; } startmove（ali_u [this.index]、{left：0}、function（）{bbtn = true; //次の動きは、現在の動きが完了した後にのみ実行できます}）; //現在のインデックスをinow = this.indexに割り当てます。 } //終了した場合}; }};複製画像：
7。アコーディオン効果
1。アイデア1： Liの幅を変更して作成します。
2。アイデア2：最初のアイテムを除くすべてのLIは等しい間隔で配置され、イベントがトリガーされた後、位置は等しく変化します。
window.onload = function（）{var oul = document.getElementById（ 'ul'）; var ali_u = oul.getelementsbytagname（ 'li'）; //（var i = 1; i <ali_u.length; i ++）の最初の項目を除くすべての位置決め{// isometric 30px位置決めali_u [i] .style.left =（470-3*40）+（i-1）*30+'px'; } for（var i = 0; i <ali_u.length; i ++）{ali_u [i] .index = i; ali_u [i] .onmouseover = function（）{for（var i = 0; i <ali_u.length; i ++）{ali_u [i] .index = i; Ali_u [i] .onmouseover = function（）{for（var i = 0; i <ali_u.length; i ++）{if（i <= this.index）{// index startmove（ali_u [i]、{left：i*30}）; } else {// index startmove（ali_u [i]、{左：（470-3*40）+（i-1）*30}）よりも大きいすべての右の配置}}}}}}};複製画像：
8。アコーディオン効果2
以前にLiを均等に位置付けます！
window.onload = function（）{var oul = document.getElementById（ 'ul'）; var ali_u = oul.getelementsbytagname（ 'li'）; var num = math.ceil（470/ali_u.length）; //各//幅（var i = 1; i <ali_u.length; i ++）{ali_u [i] .style.left = num*i+'px'; } for（var i = 0; i <ali_u.length; i ++）{ali_u [i] .index = i; ali_u [i] .onmouseover = function（）{for（var i = 0; i <ali_u.length; i ++）{ali_u [i] .index = i; Ali_u [i] .onmouseOver = function（）{for（var i = 0; i <ali_u.length; i ++）{if（i <= this.index）{startmove（ali_u [i]、{left：i*30}）; } else {startmove（ali_u [i]、{左：（470-3*40）+（i-1）*30}）; }}}}; ali_u [i] .onmouseout = function（）{for（var i = 0; i <ali_u.length; i ++）{startmove（ali_u [i]、{left：num*i}）; }}; }};複製画像：
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。