以前に階層を変更するCarouselグラフアルゴリズムを共有しました。今日、私は透明性を使用して、変位のないカルーセルグラフアルゴリズムを実現し続けています。
実装ロジック：すべての写真を一緒にカルーセルする、つまりレイヤーをレイヤーで積み重ね、階層属性を使用して正しい画像順序を調整し、画像の透明度を0に設定し、最初の写真の透明性を1にします。特定のアルゴリズムは次のとおりです。
<！doctype html> <html> <head> <meta charset = "utf-8"> <title>透明アルゴリズムの変更</title> <style media = "screen"> * {margin：0;パディング：0; } .wrap {width：60％;マージン：自動;位置：相対; } .wrap img {width：100％;位置：絶対;左：0;上：0;遷移：2秒; } .wrap img：nth-child（1）{position：relative; } .wrap .follow {width：150px;高さ：30px;マージン：自動;ディスプレイ：Flex; justify-content：space-bethed; } .wrap .follow span {width：10px;高さ：10px;ボーダーラジウス：50％;ボーダー：3pxソリッドグレー。 } .wrap .follow span：hover {cursor：pointer; } </style> </head> <body> <div> <img src = "img/01.jpg"/> <img src = "img/02.jpg"/> <img src = "img/03.jpg"/>> <img src = "img/04.jpg"/> <input id = "" Typent "" Type "Type value = "◀︎"> <入力id = "rightbut" type = "ボタン" name = "name" value = "▶︎"> <div> <span> </span> </span> <span> </span> <span> </span> </span> <span> </span> </div> </<type = "text"> javascript "> document.queryselectorall（ '。wrap img'）; var spans = document.queryselectorall（ '。フォロースパン'）; var leftbut = document.getElementById（ 'left -but'）; var rightbut = document.getElementById（ 'redist -but'）; //パラメーター関数Showimage（index）{for（var i = 0; i <images.length; i ++）{spans [i] .index = i; //カスタム属性、対応するサブスクリプト画像[i] .index = i; //カスタム属性、対応するサブスクリプト画像[i] .style.zindex = 100 -sty = 100 -sty = 100 -i; '0'; //すべての画像の透明性を0スパンに割り当てる[i] .style.background = 'gray'; //すべてのドット北京の色は黒に設定されます} //入力パラメーターのサブスクリプト値をホワイトスパンに描いた画像の背景色を割り当てます[index] .style.background = 'white'; } showimage（0）; //最初に、着信パラメーターsubscript値を持つ画像のスタイルを0 var count = 1; // get counter //自動カルーセル関数Imagemove（）を定義します{//カウントの値が4で割り当てられる場合は、0にカウントを再割り当てします。 if（count％4 == 0）{count = 0; } // function showimage（）にパラメーターとしてカウント値を渡す; showimage（count）; count ++; // 1回+1}を実行} //関数imagemove（）を2秒ごとに1回呼び出し、ImageInitialMove var imageInitialMove = setInterval（ 'imagemove（）'、2000）に割り当てます。 //イベントをクリックしてくださいleftbut.onclick = function（）{// Timer ClearInterval（ImageInitialMove）; //方向は自動ホイールの反対であるため、カウントの値が0であると判断する必要があり、それを4に再割り当てし、if（count == 0）{count = 4; } count - ; showimage（count）; //関数カウントを-imageInitialMove = setInterval（ 'imagemove（）'、2000）; } // right-to-rightbut.onclick = function（）{clearInterval（imageInitialMove）; ImageMove（）; //方向は自動カルーセルと同じであるため、直接呼び出してください//タイマーImageInitialMove = setInterval（ 'imagemove（）'、2000）; } //ドットのイベントをクリックします（var i = 0; i <spans.length; i ++）{spans [i] .onclick = function（）{clearInterval（imageInitialMove）; //現在クリックされているドットのサブスクリプト値を割り当てて、count = event.target.index; //関数のshowimage（count）を呼び出します。 ImageInitialMove = setInterval（ 'ImageMove（）'、2000）; }} </script> </html>素晴らしいトピックの共有：jQueryの写真カルーセルjavascript写真カルーセルブートストラップ写真カルーセル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。