今日、私は他の誰かによって書かれたスライド画像を見ました。かっこいい。ソースコードを読むとき、それは少し難しいと思われました。だから私は模倣して書いた。効果は元のWebページと同じでしたが、私自身のJSコードはロジックが単純であり、改善する必要があります。
PS：2日前にカルーセルを書きましたが、その互換性は良くありません。今日このWebページを書いたとき、私はこのアイデアにも従って、Google Chromeで非常にうまく走りました。 Firefoxの多くの機能を実装できません。ラップパネルは絶対的なポジショニングを使用するため、翻訳翻訳は左に変更されます。変更後、各ブラウザはうまく機能します。
特定のコードは次のとおりです
HTMLコード（コメントは書かれていません）
<div> <h1>Parallax Slider</h1> <div> <div> <div id="bg_1" style="left: 0px;"></div> <div id="bg_2" style="left: 0px;"></div> <div id="bg_2" style="left: 0px;"></div> <div> <div> <img id="wrap_panel" style = "left：0px;"> <div> <img id = "img_1" src = "images/1.jpg"> </div> <div> <img src = "images/2.jpg"> </div> <div> src = "images/5.jpg"> </div> <div> <img src = "images/6.jpg"> </div> </div> <div> <span id = "perv_btn"> </span> <span> <span> <span> <span> < id = "show_small"> <ul> <li> <img src = "image/thumbs/1.jpg"> </li> <li> <img src = "images/thumbs/jpg"> </li> <img src = "yights/thumbs/3.jpg"> </</<li> <img src = "images/thumbs/4.jpg"> </li> <li> <img src = "images/thumbs/5.jpg"> </li> <li> <img src = "images/thumbs/6.jpg"> </li> </ul> </div> </div> div> div> </div> </div> </div> div> div>
CSSコード（自分で読む）：
* {マージン：0;パディング：0; } html、body、.container {width：100％;高さ：100％;フォントファミリー：「Microsoft Yahei」; } .container {background-color：＃222; Overflow-X：非表示; } .container h1 {font-size：50px;色：#ccc;テキストアライグ：センター; font-weight：Bolder;高さ：120px;ラインハイト：120px; } .wrap {position：relative;幅：600％;高さ：400px;ボーダートップ：10pxソリッド＃333;国境圏：10pxソリッド＃333;マージントップ：20px; } .bg {position：absolute;幅：100％;高さ：100％;左：0;上：0; -webkit-transition：すべて1s; -moz-transition：すべて1s; -ms-transition：すべて1s; -o-transition：all 1s; -o-transition：すべて1s;遷移：すべて1S; } .bg-1 {background：url（images/bg1.png）; } .bg-2 {background：url（images/bg2.png）; } .bg-3 {background：url（images/bg3.png）; } .wrap-panel {position：absolute;幅：100％;高さ：100％; -webkit-transition：すべて1s; -moz-transition：すべて1s; -ms-transition：すべて1s; -o-Transition：すべて1S;遷移：すべて1S; } .panel {width：16.66％;高さ：100％;フロート：左; } .panel img {display：block;マージン：0 Auto;マージントップ：35px;ボーダーラジウス：10px;国境：10px Solid RGBA（143、143、143、0.6）; } .navigation-button span：hover {ofacity：0.8} .perv-button、.next-button {position：absolute;幅：30px;高さ：60px;バックグラウンドカラー：＃344133;ボーダーラジウス：10px;カーソル：ポインター;不透明：0.4; } .perv-button {background：＃000 url（images/prev.png）Center center no-Repeat; } .next-button {background：＃000 url（images/next.png）センターセンターセンターノーリピート; } .show-small {position：absolute;幅：680px;下：20px; } .show-small ul {list-style：none; } .show-small ul li {float：left;マージン：0 10px;ボーダー：5px Solid #fff;不透明度：0.7;カーソル：Pointer; -Webkit-Transition：すべて.3S; -moz-transition：すべて.3秒; -ms-transition：すべて.3s; -o-Transition：すべて.3S;遷移：すべて.3; }。 }JSコード（小さなデモ）：
window.onload = function（）{// get element var getdom = function（id）{return typeof id == "string"？document.getElementById（id）：id; } // get object var img = getdom（ 'img_1'）; var prev = getdom（ "perv_btn"）; var next = getdom（ "next_btn"）; var wrap_panel = getdom（ 'wrap_panel'）; var bg_1 = getdom（ "bg_1"）; var bg_2 = getdom（ "bg_2"）; var bg_3 = getdom（ "bg_3"）; var show_small = getdom（ "show_small"）; var list = show_small.getelementsbytagname（ "li"）; var wwidth; //要素のバインドイベントvar addevent = function（id、event、fn）{var el = getdom（id）||書類; if（el.addeventlistener）{el.addeventlistener（event、fn、false）; } else if（el.attachevent）{el.attachevent（ 'on' + event、fn）; }} function init（）{//ボタンの配置//フォワードボタンの上部距離=画像の上距離 +画像の高さの半分 - ボタンの半分prev.top = img.offsettop + img.clientheight/2 -prev.clientheight/2 + 'px'; next.style.left = img.offsetleft + img.clientwidth + 10 -next.clientwidth + 'px'; next.style.top = prev.style.top; //小さな写真のコンテナを配置wwidth = document.documentlement.clientwidth || document.body.clientWidth; show_small.style.left =（wwidth -show_small.clientwidth）/2 + 'px'; } // Small Picture Processing関数small_img（）{//（var i = 0; i <list.length; i ++）{//回転方向= math.pow（-1、parseint（math.random（）*10））の画像を回転します。 list [i] .style = "transform：rotate（" +（math.random（）*20*方向） + "deg）"; } list [0] .style.opacity = 1; } function only_one（el、num）{for（var i = 0; i <el.length; i ++）{el [i] .style.opacity = 0.7; } // console.log（num）; el [num] .style.opacity = 1; } //ブラウザがズームされている場合、window.onresize = function（）{init（）; } //関数init（）; small_img（）; addEvent(prev,'click',function() { // Change the left var oldPos of wrap-panel oldPos = parseInt(wrap_panel.style.left); if(oldPos == 0) { // Background pan picture container pan bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = -wwidth*（list.length -1） + 'px'; parseint（ - （oldpos/wwidth + 1） + 'px'; + 'px'; addEvent（次は、 'click'、function（）{// wrap-panel oldpos = parseint（wrap_panel.style.left）; if（oldpos == -wwidth*（list.length-1））{// background pan picture containter panパンパンパンパンパンを変更するbg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.left = '0px'。 + 'px'; style.left =（wwidth + parseint（ - （oldpos/wwidth + 1）*100） + 'px' - wwidth + parseint（ - （oldpos/wwidth + 1）） + 'px'; }上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。