プラグイン！プラグイン！このプラグインとそのプラグインを毎日求めているのが聞こえます。もちろん、サードパーティのプラグインを使用すると、開発効率が大幅に向上する可能性がありますが、初心者としては、主に時間があるからです。
今日は、ネイティブJSを使用して写真のカルーセルを書く方法をあなたと共有します
高齢者は次のナンセンスを無視することができます：
始める前に、今までフロントエンドを学ぶという私の経験について話させてください。今日は約2か月かかるはずです。基本的には毎日6〜10時間の勉強時間がかかりますが、純粋に自己学習しており、トレーニングは信頼できないと言われています！私は現在、3つの主要な項目（HTML5、CSS3、JavaScript）のみを学んでいますが、他のすべての知識はまだ学習計画の背後にランク付けされています...私は混乱の期間にあり、最初に何を学ぶべきかわかりません！何があっても、最初に3つの主要な項目を整理しましょう。良い提案があれば、私にアドバイスを与えることができることを願っています！
HTML5からCSS3まで、フロントエンドは非常に簡単だと感じたので、少し自信とやる気を感じました。それから私はJSを学びました。私はC＃とAppleの迅速な学習をしていました。それらは両方ともオブジェクト指向で強力な言語であり、比較的進んでいます。しかし、私はまだフロントエンドが好きなので、ここを向いてJSを学び始めました。簡単でしたが、この言語は少し厄介で、他の言語とは違うと感じました！権威あるガイドでは理解しにくいものがいくつかあります。できない場合は、Baiduをもっと見て、閉鎖やプロトタイプなどの概念について他の人の理解をもっと見て、徐々にそれらを習得できます。この段階では、フロントエンドには多くのものが含まれていることに徐々に気付いたかもしれません！サードパーティのライブラリ、フレームワークなどがたくさんあります。要するに、新しい名詞は目の前に現れ続けます。これは時代遅れになると言う人もいますが、それは主流になりそうです、それはとても混oticとしています！とても乱雑！次にどうすればいいですか？最初に何を学ぶべきですか？後で何を学ぶべきですか？
私は現在この段階にいます。 2日間連続して何も我慢できず、眠ることができず、動揺していることもあります。つまり、私はそれに取りつかれています！
私はちょうど思った、私の何が問題なのですか？私はそれを理解できません！それを忘れて、休憩を取り、あなたの体を行使してください！走りに行って、さまよう！考えながら：自分自身を州に戻す方法！
後で私はこれをしました：キャンディーを与えてください！ （自分で簡単な例をいくつか挙げてください）
キャンディーはとても甘いので、実際に作ることができました！達成感はゆったりとしており、動機はいっぱいです！私は次々とインスタンスを書いただけです。 APIを理解していない、またはAPIをよく知らない場合は、ドキュメントを翻訳します（他の人のコードを読む前に自分で書きます。本当にできない場合はもう一度読みます）。徐々に、私は本当に戻ってきて、軌道に乗っ始めたと感じました！
また、現在フロントエンドの企業を採用している企業のほとんどがどのような人々を必要としているかを見て、その後、自分のために新しい学習計画を立てました。もちろん、私は今時間があるので、最初に3つの主要な基盤を統合し、さらに練習してから、戻ってドキュメントをもう一度読んで、それらの基本的および内部原則を理解するのに時間をかけたいです！次に何を学んでも、始めるのはずっと簡単です！同時に、フロントエンドをさらに理解し続けてください！この職業の見通しと方向性を理解することは、自分のためにフロントエンドの世界観を確立することです。
どのサードパーティライブラリとフレームワークを学習すべきかについては、現時点ではわかりません。 JQは時代遅れですか？あなたは学ぶ必要がありますか？わからないので、もう気にしません。最初にネイティブのものと遊んでください！将来は自然に知っておくべきです！
実際の戦闘が開始され、以下はコードとデモンストレーションです。
現時点では、高齢者のオブジェクト指向の執筆方法を学ぶことができないので、いくつかの機能を書くことしかできません。 （写真はインターネットから来ています。300*200の写真を自分でカットして効果を表示することもできます。「グレードとアウト」ボタンをクリックして開始することもできます）
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin：0;パディング：0;リストスタイル：なし;テキスト装置：なし; } #slide {position：absolute;トップ：100px;左：50px;幅：300px;高さ：200px;ボーダー：1pxソリッドグレー; } #slide .blog-name {display：block;位置：絶対;下：0;左：0;幅：100％;高さ：25px;ラインハイト：25px;背景色：RGBA（155,155,155,0.5）; Z-Index：4;カーソル：ポインター;テキストインデント：3px; }＃slide-nav {position：absolute;右：5px;下：5px; z-index：5; }＃slide-nav li {display：inline-block;幅：16px;テキストアライグ：センター;ラインハイト：16px;ボーダーラジウス：5px;カーソル：ポインター;オーバーフロー：隠し; }＃slide-nav li：hover、.selected {background-color：＃336699;色：白; } .slide-content1 {position：absolute;幅：300px;高さ：200px;フォントサイズ：0; } .slide-content1 a {position：absolute;カーソル：ポインター; } .slide-content1 a：visited {color：black;}＃model-btn {position：absolute;上：-25px;フォントサイズ：20px; } </style> <script> window.onload = function（）{var sufuimagescrooller = function（）{//いくつかのツール関数function show（img）{var id; for（var i = 0; i <= 21; i ++）{var op = i * 5; id = setimeout（function（e）{setopacity（img、e）} .bind（this、op）、i * 50）; } clearTimeout（id）; } function hide（img）{var id; for（var i = 0; i <= 21; i ++）{var op = 100 -i * 5; id = setimeout（function（e）{setopacity（img、e）} .bind（this、op）、i * 20）; } clearTimeout（id）; } function getByid（id）{return document.getElementById（id）; } function setopacity（elem、level）{if（elem.filter）{elem.style.filter = "alpha（opacity =" + level + "）"; // ie} elseとの互換性{elem.style.opacity = level/100; }} //（Advanced and Progressive Mode）ボディ関数関数InoutModel（nums、navid、imgcontainerid、imginfoid、delay）{//モード選択ボタンの複数のクリックを防ぎ、より多くのliを作成するif（getbyid（ 'slide-nav'）。 var targetidext = 0; //画像ステータス情報を保存するvar currentidext = 0; //画像ステータス情報を保存するvar frag = document.createdocumentfragment（）; for（var i = 0; i <nums; i ++）{nav [i] = fragment.AppendChild（document.createElement（ 'li'））; // appendChildメソッドは、li nav [i] .innerhtml = i+1を返します。 } getbyid（navid）.appendchild（frag）; //最初の画像を表示するために初期化var imgs = getbyid（imgcontainerid）.getelementsbytagname（ 'a'）; var info = getbyid（imginfoid）; info.innerhtml = imgs [0] .title.slice（0,12）+'...'; nav [0] .classname = 'selected'; // liのクラス名の動的な変更（var j = 1; j <nav.length; j ++）{setopacity（imgs [j]、0）; } //自動Carousel var idを起動します。 function start（delay）{id = setinterval（function（）{hid（imgs [cureentidext]）; nav [cureentidename = ''; if（targetidext <nums-1）{targetidexidext ++;} else {targetidext = 0;} humentidext = targetidext; info.innerhtml = imgs [targetidext] .title.slice（0,12）+'...}; } start（delay）; //各ナビゲーションボタンのイベントを追加（var k = 0; k <nav.length; k ++）{nav [k] .onclick = function（event）{var e = event || window.event; // IE var t = event.target || event.srcelementと互換性があります。 // ie var idex = parseint（t.innerhtml）-1と互換性があります。 console.log（ 'idex：'+idex+'t：'+targetidext+'c：'+cureentidext）; if（idex === humen [cureentidext]）; nav [cureentidext] .classname = ''; humenidext = idex; show（imgs [idex]）; nav [idex] .classname = 'selected'; info.innerhtml = imgs [idex] .title.slice（0,12）+'...'; }} getByid（navid）.onmouseover = function（）{clearInterval（id）}; getbyid（navid）.onmouseout = function（）{start（delay）}; } //右から左モードへの関数RightModel（nums、navid、imgcontainerid、imginfoid、delay）{alert（ 'ブロガーは怠zy、この関数を実装するのを忘れています！必要に応じてメッセージを残してください！'）; } fromtopmodel（nums、navid、imgcontainerid、imginfoid、delay）{alert（ 'blogger is怠zy、この関数を実装するのを忘れました！必要に応じてメッセージを残してください！'）; } return {inoutModel：inoutModel、fromRightModel：fromRightModel、FromTopModel：FromTopModel：FromTopModel、GetByid：getByid}}（）; sufuimagescrooller.getByid（ 'model-btn1'）。onclick = function（）{sufuimagescrooller.inoutmodel（5、 'slide-nav'、 'slide-main'、 'slide-info'、3500）; }; sufuimagescrooller.getByid（ 'model-btn2'）。onclick = function（）{sufuimagescrooller.fromrightModel（5、 'Slide-nav'、 'Slide-main'、 'Slide-info'、3500）; }; sufuimagescrooller.getByid（ 'model-btn3'）。onclick = function（）{sufuimagescrooller.fromtopmodel（5、 'slide-nav'、 'slide-main'、 'slide-info'、3500）; }; }; </script> </head> <body> <div id = "slide"> <a id = "slide-info" href = "http://www.cnblogs.com/susufufu/"ターゲット= "_ blank" href = "http://www.cnblogs.com/susufufu/p/5749922.html"ターゲット= "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u = 1247027539,1217965501&fm=21&gp = 0.jpg"> href = "http://www.cnblogs.com/susufufu/p/5768431.html"ターゲット= "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u = 4286855119,2694540617&fm=21&gp=0.jpg"> href = "http://www.cnblogs.com/susufufu/p/5738673.html"ターゲット= "_ blank"> <div> <img src = "https://ss3.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhy/it/u = 4042865154,1782505495&fm=21&gp = 0.jpg"> href = "http://www.cnblogs.com/susufufu/p/5714020.html"ターゲット= "_ blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u = 2603911195,1920098549&fm=21&gp=0.jpg"> href = "http://www.cnblogs.com/susufufu/p/5759480.html"ターゲット= "_ blank"> <div> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u = 4104312586,1589909074&fm=21&gp = 0.jpg"> <put/div </div </div </div <> div </<fiv <> <putn "" Model-btn " id = "model-btn1" value = "gradual progressive"> <入力タイプ= "ボタン" id "=" model-btn2 "value =" rift to左 "> <入力タイプ="ボタン "id =" model-btn3 "value =" botto "> </div> div> </body> </html>最初は、それを実装する方法について考えてください。タイマーを使用して画像を変更し、カットストーンの画像の不透明度を変更しませんか？
1。HTMLレイアウトは比較的簡単です：
<ul id = "Slide-nav"> </ul> <div id = "Slide-main"> <a href = ""ターゲット= "_ blank"> <div> <img src = "lg1.png"> </div> </a> ... </div> ...
Slide-INFOは、画像タイトルを表示するために使用されます。 Slide-Navはデジタルボタンで、Slide-Mainは画像コンテナであり、画像リンクは内部に配置されています。
タグには、JSを介して動的に作成されるため、LIは書かれていません。
2。CSSスタイルの設定を体験する限り、それらを理解できます。彼らに注意を払ってください：
•独自のレイアウトを作成する前に、親要素に境界線を追加して、シーンを理解して最終的に削除できるようにするのが最善です。
•ul liおよび他の多くのタグには、デフォルトでパディングがあり、すべては0に設定する必要があります。
*{マージン：0;パディング：0;リストスタイル：なし;テキスト装置：なし; }高さ：25px;ラインハイト：25px; 2つは等しいので、キャラクターを中央に配置できるように
Z-Indexはあなたの兄弟と子供にのみ相対的であり、傍観者の親relativeにとって無効です。あなたがそれを傍観者の親relativeの前に表示したい場合は、親relativeの祖先を傍観者に設定します。たとえば、あなたの祖父は首相であり、あなたの2番目のマスターは農民であり、あなたの家族のすべてのアイデンティティはあなたの2番目のマスターの家族のすべてのアイデンティティよりも高貴です。
•ポジション：絶対;それは彼の父親にも関連しています。彼の父親がポジショニングを設定していない場合、それは信頼できないので、彼がそれを見つけるまでサポートを探し続けてから、彼に頼ってそれを配置してください！
•右から左に効果を達成したい場合は、font-size：0を覚えておいてください。写真の間の間隔について明確にし、写真を肩から肩まで保ちましょう！
ことわざにあるように、練習は完璧になります。 CSSがしっかりしている場合にのみ、レイアウトを制御できます！たとえば、次のダブルウィングレイアウトを位置付けずに達成できます。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> body {margin：0;パディング：0; } .header、.footer {width：100％;高さ：50px;ラインハイト：50px;テキストアライグ：センター;バックグラウンドカラー：Greenyellow; } .container {overflow：hidden; *ズーム：1; } .Left {float：left;幅：100px;高さ：100px;マージン左：-100％;背景色：緑; } .main {float：left;幅：100％;高さ：100px;背景色：灰色; } .right {float：left;幅：200px;高さ：100px;マージン左：-200px;背景色：金; } .center {padding-left：100px;パディング右：200px; } </style> </head> <body> <div> header </div> <div> <div> main-center </div> </div> <div>左</div> <div>右</div> </div> <div> footer </div> </body> </html>コードの実装
最初にアウトラインを書きます：
var sufuimagescrooller = function（）{function getbyid（id）{...} // universal get element object function setopacity（elem、level）{...} //透明関数Hide（...} // fake in function show（omg）{...} // fay } //メイン関数ボディリターン{inoutModel：inoutModel、...}}（）;このようにして、sufuimagescrooller、sufuimagescroollerを介してinoutModelメソッドを呼び出すことができます。 InoutModel（5、 'Slide-Nav'、 'Slide-Main'、 'Slide-info'、3500）;
inoutModel（nums、navid、imgcontainerid、imginfoid、delay）パラメーター：numsは、写真数、navidデジタルボタンコンテナID、imgcontainerid画像コンテナIDに対応する必要があるLiの数を作成します。
アウトラインを書いた後、半分完了します。その他は、特定の詳細の実装です。よく書かれていませんでした。この関数を実装したとしか言えません。誰もが自分たちのためにそれについて考えています。良い提案がある場合は、お気軽にお気軽にお問い合わせください。
InoutModel関数にカットすることから始めて、段階的に深く進みます。重要なのは、手動で入力することです。あなたがそれを見るだけで、あなたはその深い経験を持たないでしょう！
さて、それがポイントです。ドキュメントAPIを自分で翻訳する方法がわからない場合は、メッセージを残して私に尋ねることもできます
上記の記事「ネイティブJS +のカルーセル効果を実現する感覚は、フロントエンド（強迫観念を防ぐ）のすべてのコンテンツです。私があなたと共有するコンテンツです。参照を提供できることを願っています。