私は写真のカルーセルにresしていて、よく学んでいないので、最近CSSに興味を高めることはできません。それから私はブラックロードまで歩いて、jQueryとJSを使用してカルーセルと絵の衰退の効果を書きました。将来の学習への道は非常に長いです。フロントエンドの道路をさらに進むことを願っています `（∩_∩） '
原則として、オンラインで多くのチュートリアルがあります。
フェードインしますが、実際、ここではフェード効果のみが使用されます。フェードされた画像ごとに、ディスプレイをブロックするように設定します。画像の表示方法を設定する前に、写真の透明性を徐々に増やすと、人々は衰退感を与えます。
実際、JSコードには別の重要なポイントがあります。閉鎖はコードで使用されているため、閉鎖を少し理解しています。ここでもう少し言葉を言ってみましょう：
閉鎖の公式の説明は、閉鎖は多くの変数とこれらの変数に結合した環境を持つ式（通常は関数）であるため、これらの変数も式の一部であるということです。
最も簡単な方法は、次のとおりです。
関数Aの内部関数Bが変数外部関数Aによって参照されると、閉鎖が作成されます。
もっと徹底的に言った。いわゆる「閉鎖」は、別の関数をコンストラクター本体のメソッド関数として定義することであり、このオブジェクトのメソッド関数は、外部関数本体の一時変数を指します。これにより、ターゲットオブジェクトが生涯に常にメソッドを維持できる限り、元のコンストラクター本体が使用する一時的な変数値を間接的に維持できます。
初期コンストラクター呼び出しが終了し、一時変数の名前が消えましたが、変数の値は常にターゲットオブジェクトのメソッド内で参照でき、値はこの方法でのみアクセスできます。同じコンストラクターが再び呼び出されたとしても、新しいオブジェクトとメソッドのみが生成されます。新しい一時変数は新しい値にのみ対応し、最後の呼び出しとは独立しています。
次の関数は閉鎖関数です。なぜ閉鎖を使用するのですか？通常の機能は不可能ですか？それは本当に不可能です。ここでの閉鎖の目的は、フラグへの参照を維持することです。閉鎖がない場合、ローカル変数の場合、関数が一度実行される限り、つまりフラグが一度実行される限り、ローカル変数は収集され、ゴミ収集メカニズムによってクリーンアップされます。断続的な呼び出しの関数を介してフラグ変数を参照します。 2番目の実行が実行されると、フラグはその値を失い、関数本体は正しい結果を実行できません。フロントエンドに触れ始めたとき、閉鎖はオプションであると感じました。実際、このことは本当に重要です！
var setVal = function（s、flag）{return function（）{pos = math.abs（parseint（pic.style [point]））; （flag> 0）{//電流ポイントがターゲットポイントの座標よりも大きい場合、画像は右に移動し、左値はpic.style [point] = -math.floor（pos +（parseint（s*ssinglesize）-pos）*speed） +'px'; } if（flag <0）{pic.style [point] = -math.ceil（pos +（parseint（s*ssinglesize） - pos）*speed） +'px'; } if（pos ==（ssinglesize * s））{now = s; ClearInterval（間隔）; }}};これがコードです：
HTML
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> picsglide </title> <link href = "css/index.css" rel = "styleSheet" typen src = "js/index.js"> </script> </head> <body onload = "init（）"> <div id = "picbox"> <ul class = "show_pic" style = "left：0"> <li class = "on"> <a href = "＃"> <img src = "imgs/ccc.jpg"/</</</</</</</</</</</</<img src = "imgs/aaa.jpg"/> </li> <li> <img src = "imgs/bbb.jpg"/> </li> <li> <img src = "imgs/ccc.jpg"/>> </li> <li> <img src = "imgs/ccc.jpg"/</</</</< src = "imgs/ccc.jpg"/> </li> </ul> <div class = "bg"> </div> <ul class = "show_des"> <li> boots1 </li> <li>プス</li> <li> boots2 </li> <li> puss in boots3 </ul> <ul class = "Icon_num"> <li class = "on"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div> </body> </html>
CSS
ボディ{font-size：12px; } ul、li {padding：0;マージン：0;リストスタイル：なし; } #picbox {width：610px;高さ：205px;マージン：50px Auto;オーバーフロー：隠し;位置：相対; font-size：0;}/*Carousel Picture*/＃picbox .show_pic {width：3050px;位置：絶対;}＃picbox .show_pic li {float：left;幅：610px;高さ：205px;表示：なし; /*展示：なし;*/}＃picbox .show_pic li.on {display：block;}＃picbox .show_pic li img {display：block;幅：610px;高さ：205px;}＃picbox .icon_num {position：absolute;下：12px;右：10px; z-index：10;}＃picbox .icon_num li {float：left; /*背景：url（/uploadfile/200912/28/FA15567738.gif）No -Repeat -15px 0; */幅：16px;高さ：16px;フォントサイズ：16px;色：＃39f;テキストアライグ：センター;カーソル：ポインター;マージン右：5px;}＃picbox .icon_num li.on {background：＃000;不透明度：0.5; }/*background*/。bg {z-index：1;位置：絶対;下：0;高さ：40px;幅：610px;背景：＃000;不透明度：0.6;フィルター：Alpha（Opacity = 60）;}＃picbox .show_des {width：300px;高さ：18px;位置：絶対;下：11px;左：15px;色：#fff; z-index：10;}＃picbox .show_des li {display：none;ラインハイト：18px; font-size：18px;}＃picbox .show_des li.on {display：block;}JS
関数cleanwhitespace（oelement）{for（var i = 0; i <oelement.childnodes.length; i ++）{var node = oeelement.childnodes [i]; if（node.nodetype == 3 &&！// s/.test（node.nodevalue））{node.parentnode.removechild（node）; }}} // Carousing Code this.layerglide = function（auto、obox、ssinglesize、second、fspeed、point）{var interval、timeout; // 2つのタイマーvar pos; //現在の位置決め座標の絶対値は、var時間= second、now = 0; //タイムイメージは時間間隔を1回移動します。現在、現在の画像のインデックス値var速度= fspeed //移動速度var delay = second * 1000; //画像の各切り替えの時間間隔var picbox = document.getElementById（obox）; CleanWhiteSpace（picbox）; var pic = picbox.childnodes [0]; //写真リストvar des = picbox.childnodes [2] .getelementsbytagname（ "li"）; //写真リストvar con = picbox.childnodes [3] .getelementsbytagname（ "li"）; var sum = con.length; var setVal = function（s、flag）{return function（）{pos = math.abs（parseint（pic.style [point]））; （flag> 0）{//電流ポイントがターゲットポイントの座標よりも大きい場合、画像は右に移動し、左値はpic.style [point] = -math.floor（pos +（parseint（s*ssinglesize）-pos）*speed） +'px'; } if（flag <0）{pic.style [point] = -math.ceil（pos +（parseint（s*ssinglesize） - pos）*speed） +'px'; } if（pos ==（ssinglesize * s））{now = s; ClearInterval（間隔）; }}}}; var changeto = function（num）{for（var i = 0; i <sum; i ++）{con [i] .classname = ""; des [i] .classname = ""; }; con [num] .classname = "on"; des [num] .classname = "on"; var flag = math.abs（parseint（pic.style [point]）） - ssinglesize * num; interval = setInterval（setVal（num、flag）、time）; //bkg.hide（）。fadein（）; } function autoglide（）{cleartimeout（interval）; now =（now ==（parseint（sum）-1））？ 0 ：（現在 + 1）; changeto（現在）; Timeout = setimeout（autoglide、delay）; } function isauto（）{if（auto）{timeout = setimeout（autoglide、delay）; }; } isauto（）; //（var i = 0; i <sum; i ++）//ナビゲーションボタンの自動カルーセルを起動します{con [i] .onmouseover =（function（i）{return function（）{cleartimeout（timeout）; clearInterval（interval）; changeto（i）; this.onmouseout = isauto（）;}） this.layerfader = function（auto、obox、second、count、speed）{var interval、timeout; // 2つのタイマーvar = 0; //タイム画像は時間間隔を1回移動します。現在、現在の画像のインデックス値var delay = second * 1000; //各画像の時間間隔は切り替えられますvar picbox = document.getElementById（obox）; CleanWhiteSpace（picbox）; var pic = picbox.childnodes [0] .getelementsbytagname（ "li"）; var des = picbox.childnodes [2] .getelementsbytagname（ "li"）; var con = picbox.childnodes [3] .getelementsbytagname（ "li"）; var sum = con.length; function fadein（elem）{setopacity（elem、0）; //最初は（var i = 0; i <= count; i ++）{//透明変化20 * 5 = 100（function（i）{var level = i * 5; //透明変化値setime（function（）{setopacity（elem、level）}、i *速度）;}）（i）; }} function setopacity（elem、level）{//透明性を設定するif（elem.filters）{elem.style.filter = "alpha（opacity =" + level + "）"; } else {elem.style.opacity = level / 100; }} var changeto = function（num）{for（var i = 0; i <sum; i ++）{con [i] .classname = ""; des [i] .classname = ""; pic [i] .classname = ""; }; Fadein（pic [num]）; con [num] .classname = "on"; des [num] .classname = "on"; pic [num] .classname = "on"; //bkg.hide（）。fadein（）; } function autoglide（）{cleartimeout（interval）; now =（now ==（parseint（sum）-1））？ 0 ：（現在 + 1）; changeto（現在）; Timeout = setimeout（autoglide、delay）; } function isauto（）{if（auto）{timeout = setimeout（autoglide、delay）; }; } isauto（）; //（var i = 0; i <sum; i ++）//ナビゲーションボタンの自動カルーセルを起動します{con [i] .onmouseover =（function（i）{return function（）{cleartimeout（timeout）; // clearinterval（interval）; changeto（i）; this.onmouseout = isauto（isauto（）;}）jqueryはJSよりもはるかに簡単ですので、ここでは詳細に説明しません。私が3年生のとき、私はデザインパターンのクラスを受講しました。教師は、実装ではなくインターフェイスのプログラムをプログラムするように言った。コードの再利用性を改善するために、コードに定数を表示しないようにしてください。したがって、コードを書くとき、すべての変数因子がパラメーターに記載されています。最後の文は、JS DOM Operationの場合、JSネイティブが王国です。より多くを使用して練習することによってのみ、あなたはそれをうまく習得することができます。将来さらに進むことを願っています。
画像カルーセルとフェードインエフェクトを実装するネイティブJSの上記の簡単な例は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。