この記事の例は、参照の画像スイッチング効果を実現するためのJSの効果を共有しています。特定のコンテンツは次のとおりです
JSを使用して、ボタンをクリックして画像を切り替える効果を実現します。
<div id = "box"> <div id = "img_box"> <img src = "../ raw/b1.jpg"> <img src = "../ raw/b2.jpg"> <img src = "../ raw/b3.jpg"> <img src = "../ raw/b4.jpg"> </div> id = "right"> </div> </div>
構造：固定幅と高さのdivを使用して、最も外側の容器を作成し、オーバーフローを非表示に設定し、
次に、内側の層IMG_BOXは幅をボックスの幅の4倍に設定し、高さは同じです。つまり、IMG_BOXには4つのIMGが含まれていますが、目に見えるものは1つだけです。左下の2つのDIVは、画像を切り替えるためにクリックを実現するボタンとして機能します。画像の切り替えとは、IMG_BOXの左属性を変更することを意味するため、IMG_BOXは位置を絶対に設定する必要があります。便利なため、ボックスの位置は関係に設定されているため、IMG_BOXはボックスに対して位置付けられます。 4つの画像が左に浮かんでおり、ボックスと同じ幅と高さを備えています。
CSSコード：
*{マージン：0;パディング：0;}。box {width：800px;高さ：400px;マージン：20px Auto;位置：相対;オーバーフロー：hidden;}。img_box {height：400px;幅：3200px;位置：絶対; -moz-transition：0.5s; -webkit-transition：0.5s;} img {width：800px;高さ：400px;フロート：左;}。スイッチ{width：200px;高さ：100％;位置：絶対;}＃左{左：0px;上：0px;背景：-moz-linear-gradient（左、RGBA（84、84、84、0.50）、RGBA（20％、20％、20％、0））;背景：-webkit-linear-gradient（左、RGBA（84、84、84、0.50）、RGBA（20％、20％、20％、0））;}＃right {right：0px;上：0px;背景：-moz-linear-gradient（左、RGBA（20％、20％、20％、0）、RGBA（84、84、84、84、0.5））;背景：-webkit-linear-gradient（左、RGBA（20％、20％、20％、0）、RGBA（84、84、84、84、0.5））;}＃左：hover {background：-moz-linear-gradient（左、rgba（0、0、0,0.5）、rgba（20％、20％、20％背景：-MOZ-LINEAR-GRADIONT（左、RGBA（0、0、0,0.5）、RGBA（20％、20％、20％、0））;}＃右：hover {background：-moz-linear-gradient（左、RGBA（20％、20％、20％、20％、0）、RGBA（0、0、0、0.5））;背景：-webkit-linear-gradient（左、RGBA（20％、20％、20％、0）、RGBA（0、0、0,0.5））;}左と右の背景色と透明性グラデーションプロパティを使用します。FirefoxBrowserとWebKitブラウザーのみが追加されます。さらに、一部のIEブラウザは、360セキュアブラウザーなどのIEおよびWebKitデュアルコアです
背景：-moz-linear-gradient（左、RGBA（84、84、84、0.50）、RGBA（20％、20％、20％、0））;
背景：-webkit-linear-gradient（左、RGBA（84、84、84、0.50）、RGBA（20％、20％、20％、0））;
切り替え中にスムーズな遷移を達成するために、遷移プロパティが追加されます。
-moz-transition：0.5s;
-webkit-transition：0.5s;
JSコード：
var box; var count = 1; window.onload = function（）{box = document.getElementById（ "img_box"）; var left = document.getElementById（ "left"）; var right = document.getElementById（ "right"）; left.addeventlistener（ "click"、_左）; right.addeventlistener（ "click"、_右）; document.body.addeventlistener（ "mouseover"、demo）;} function _right（）{var dis = 0; if（count <4）{dis = count*800; } else {dis = 0; count = 0; } box.style.left = " - "+dis+"px"; count+= 1;} function _left（event）{var dis = 0; if（count> 1）{dis =（2-count）*800; } else {dis = -3*800; count = 5; } box.style.left = dis+"px"; count- = 1;}グローバル変数カウントを使用して、現在表示されている画像を記録します。 [トグル]ボタンをクリックするときは、カウントに従って表示する画像を計算し、img_boxの左属性を計算して設定します。
上記は、紹介されたJSによる画像スイッチング効果を実装するためのコードです。画像の切り替え効果を達成するのに役立つことを願っています。