JSは配列を使用して、参照用の画像スイッチング効果を作成します。特定のコンテンツは次のとおりです
配列要素の位置変換：
コンテンツを配列に分割し、最初のコンテンツを最後に追加し、最初のコンテンツを削除します
<div id = "box"> 1,2,3,4 </div> <input type = "button" value = 'switch' id = 'input'> <script> window.onload = function（）{var odiv = document.getelementbyid（ 'box'）; var oinput = document.getElementById（ 'input'）; oinput.onclick = function（）{var arr = odiv.innerhtml.split（ '、'）; // console.log（arr）; arr.push（arr [0]）; //最初のものを最後に追加し、最初のarr.shift（）を削除します。 odiv.innerhtml = arr; }} </script>シミュレーション画像の切り替え効果：
window.onload = function（）{var adiv = document.getElementsByTagname（ 'div'）; var ainput = document.getElementsByTagname（ 'input'）; var arr = []; //空の配列を作成して（var i = 0; i <adiv.length; i ++）{console.dir（getStyle（adiv [i]、 'left'））; arr.push（[getStyle（adiv [i]、 'left'）、getStyle（adiv [i]、 'top'）））; } // console.dir（arr）; ainput [0] .onclick = function（）{//最初のものを最後に追加し、最初のarr.push（arr [0]）を削除します。 arr.shift（）; for（var i = 0; i <adiv.length; i ++）{//配列を操作した後、adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; ainput [1] .onclick = function（）{//最後のものを前面に追加し、最後のarr.unshift（arr.length-1]）; arr.pop（）; for（var i = 0; i <adiv.length; i ++）{adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }};関数getStyle（obj、attr）{//最終スタイルを取得するif（obj.currentstyle）{return obj.currentstyle [attr]; } else {return getComputedStyle（obj、false）[attr]; }}}簡単なレンダリング：
例バージョン：
アイデア：
5つの写真がある場合：図1〜5の左値は、20px、60px、100px、240px、および380pxです。
左のトグルボタンをクリックした後、図1〜5の対応する値は、60px、100px、240px、380px、20pxになります。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -
この配列の最初の要素を最後まで移動するのと同等です：20px、60px、100px、240px、380px、20px。
次に、最初の要素を削除します：60px、100px、240px、380px、20px。
等々：
レイアウトの例：
<div id = "box"> <ul> <li class = 'pos_0'> <img src = "images/1.png" width = '300'> </li> <li class = 'pos_1'> <img src = "image/1.jpg" width = '400'> </li> <li class = 'pos_2'> <img src = "" " width = '500'> </li> <li class = 'pos_3'> <img src = "images/3.jpg" width = '400'> </li> <li class = 'pos_4'> <img src = "imgems src =" image/1.jpg "width = '300'> </li> dirr '> </span> </div>
スタイルの例：
＃box {width：700px; height：300px; position：relative; margin：20px auto; text-align：center;}＃box ul {list-style：none;}＃box ul li {position：absolute;} li.pos_1 {top：20px;左：60px; z-index：2;不透明：0.8;}＃box ul li.pos_2 {top：0px;左：100px; z-index：3;不透明：1;} li.pos_4 {top：50px;左：380px; z-index：1;不透明：0.5;}。dir {display：inline-block; width：45px; height：100px; background：url（ 'images/button.png'）backange：no-repeat; position：absoction; top：60px; z-index：4;} 0;左：40px;}。dirr {background -position：-55px 0;右：40px;}JSコード：
window.onload = function（）{var opre = document.getElementsByClassName（ 'dir'）[0]; var onext = document.getElementsByClassName（ 'dir'）[1]; var ali = document.getElementsByTagname（ 'li'）; var arr = []; for（var i = 0; i <ali.length; i ++）{var oimg = ali [i] .getelementsbytagname（ 'img'）[0]; // console.log（getStyle（ali [i]、 'left'））; // console.log（parseint（getStyle（ali [i]、 'ofacity'）*100））; // console.log（getStyle（ali [i]、 'z-index'））; // console.log（oimg.width）; arr.push（[parseint（getStyle [i]、 'top'））、parseint（getStyle（ali [i]、 'ofacity'）*100）、parseint（getStyle（ali [i]、 'index'））、oimg.width]）; // console.log（arr [i] [2]）; } // console.dir（arr）; opre.onclick = function（）{//左arr.push（arr [0]）; arr.shift（）; for（var i = 0; i <ali.length; i ++）{var oimg = ali [i] .getelementsbytagname（ 'img'）[0]; //CONSOLE.LOG(Arr [i] [2]）; startmove（ali [i]、{left：arr [i] [0]、top：arr [i] [1]、ofacity：arr [i] [2]、}）; ali [i] .style.zindex = arr [i] [3]; startmove（oimg、{width：arr [i] [4]}）; }}; onext.onclick = function（）{//右arr.unshift（arr.length-1]）; arr.pop（）; for（var i = 0; i <ali.length; i ++）{var oimg = ali [i] .getelementsbytagname（ 'img'）[0]; startmove（ali [i]、{left：arr [i] [0]、top：arr [i] [1]、ofacity：arr [i] [2]、}）; ali [i] .style.zindex = arr [i] [3]; startmove（oimg、{width：arr [i] [4]}）; }};関数getStyle（obj、attr）{//ユニットの値を取得if（obj.currentstyle）{return obj.currentstyle [attr]; } else {return getComputedStyle（obj、false）[attr]; }}}複製画像：
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。