この記事は、以前の記事と次の記事に分かれています。私はあなたの参照のためにJS Focus Carouselの8つの古典的な効果を共有します。特定のコンテンツは次のとおりです
基本レイアウト：
<div id = "box"> <ul id = "ul"> <li style = 'display：block;'> <img src = "images/1.jpg"> </li> <li> <img src = "images/2.jpg"> </li> <li> <img src = "images/3.jpg" <li> <img src = "images/5.jpg"> </li> </ul> <ol id = 'ol'> <li class = 'Active'> 1 </li> <li> 2 </li> <li> 3 </li> <li>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1。通常のフォーカスマップ
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'）; 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 = ''; ali_u [i] .style.display = 'none'; } this.className = 'Active'; // console.log（ali_o [this.index]）; ali_u [this.index] .style.display = 'block'; }}}複製：写真省略
2。フェード効果
var oul = document.getElementByid（ 'ul'）; var ali_u = oul.getelementsbytagname（ 'li'）; var oool = document.getElementbyid（ 'ol'）; var ali_o = ool.getElementsBytagname（ 'li'）; ali_o [i] .onmouseover = function（）{for（var i = 0; i <ali_o.length; i ++）{ali_o [i] .classname = ''; ali_u [i] .style.display = 'none'; ali_u [i] .style.filter = 'alpha（ofacity = 0）'; ali_u [i] .style.opacity = 0; } this.className = 'Active'; ali_u [this.index] .style.display = 'block'; startmove（ali_u [this.index]、{Opacity：100}）; };}複製画像：
3。効果をスクロールします：
var ol = 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] .offseight; 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'; startmove（oul、{top：-this.index*liheight}）; }};}複製画像：
4。定期的に上下にスクロールします：
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; // current index var timer = null; //タイマー（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; startmove（oul、{top：-this.index*liheight}）; }}; // Open Timer Timer = SetInterval（Torun、2000）; obox.onmouseover = function（）{clearInterval（タイマー）; }; obox.onmouseout = function（）{timer = setInterval（Torun、2000）; }; //タイミング関数関数torun（）{if（inow == ali_o.length-1）{inow = 0; } else {inow ++; } for（var i = 0; i <ali_o.length; i ++）{ali_o [i] .classname = ''; } ali_o [inow] .classname = 'Active'; startmove（oul、{top：-inow*liheight}）; }};複製画像：
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。また、誰もがwulin.comをサポートし、よりエキサイティングなフォーカスカルーセルに注意を払い続けることを願っています。