最初にレンダリングを見てみましょう
実際、カルーセルの写真を書くのは非常に簡単です。カルーセル画像を実装する2つの方法を考えました（実際、5つの下位区分がありますが、そのうち2つはDOMに固有のもので、3つはAngularJを使用したアニメーションで、すべて2つのカテゴリに分類されます）。私がそれを書き留めるとき、誰もがそれを注意深く理解することができます。
次に、最初に1つ書きます。 1つ目は、AngularJSアニメーションモジュールを使用せず、手順のみを使用してアニメーションの切り替えを完了することです。ここでは、コマンド内のDOM要素を操作することです。これは非常に簡単です。
サンプルコード
<！doctype html> <html lang = "en" ng-app = "lunbo"> <head> <head> <meta charset = "utf-8"> <スクリプトsrc = "lib/angular.min.js"タイプ= "テキスト/javascript"> </script> <スクリプト> <スクリプト= "タイプ="/javascript "/javascript <title> </title> <style> .hidden {display：none; } .active {display：block; } </style> </head> <body ng-controller = "lunbocontroller"> <div lunbo>/div> <script type = "text/ng-template" id = "lunbo.html"> <ul> <li ng-repeat = "img in images"> <a href = "{img.href}"> <img.href} " src = "{{img.src}}"/> </a> </li> </script> </body> <script> var app = angular.module（ 'lunbo'、['nganimate']）; app.Controller（ 'lunbocontroller'、['$ scope'、 'readjson'、function（$ scope、readjson）{}]）; app.Factory（ 'readjson'、['$ http'、 '$ q'、function（$ http、$ q）{return {query：function（）{var deferred = $ q.defer（）; $ http（{method： 'get'、url： 'img.json'}）。 。 app.directive（ 'lunbo'、['readjson'、function（readjson）{return {restrict： 'ea'、templateurl： 'lunbo.html'、scope：{}、link：function（scope、attr）{var promise = readjson.query（）; var step = 0; scope.flag.false.then（ console.log（data）; }、1000）}}}]）; /* app.animation('.fade-in '、function（）{return {enter：function（element、done）{}}}）*/</script> </html> [{"href"： "http://www.google.com"、 "src"： "img/5.jpg"、 "alt"： "5"}、{"href"： "http://www.google.com"、 "src"： "img/6.jpg"： "6" "：" 6 "" "href"： "http://www.google.com"、 "src"： "img/8.jpg"、 "alt"： "8"}、{"href"： "http://www.google.com"、 "src"： "img/8.jpg"： "8" " "href"： "http://www.google.com"、 "src"： "img/8.jpg"、 "alt"： "8"}、{"href"： "http://www.google.com"、 "src"： "img/9.jpg"、 "：" 9 "}]命令が終わるかどうかは簡単にわかります。これは、AngularJS自体によってカプセル化されたjQuery関数を呼び出して、命令のリンク関数のelementオブジェクトを呼び出すことによって行われます。
もう1つはです
リンク：function（scope、element、attr）{var promise = readjson.query（）; var step = 0; scope.flag = false; promise.then（function（data）{console.log（data）; scope.images = data;}）; setInterval（function（）{element.find（ "li"）。removeclass（ "acitve"）; step ++; step = step％5; element.find（ "li"）。エフェクトを移行する場合は、CSS3トランジションアニメーションをaciveクラスに追加できます。
これにより$httpと$qを使用して、遅延した非同期データプルを実装します。この方法で関数を組み合わせることにより、関数はより堅牢で、関数を監視するのにより便利になる可能性があります。 Angularjsの$qとJQueryの$Deferred内容を特に説明します。実際、原則は類似しており、どちらもpromise操作を実装しています。
JavaScriptを実装することの難しさは、AngularJSのアニメーション効果をトリガーするために要素を増やして減らす方法です。今回は1つ書きましたが、実行を開始したときに小さな欠陥がありました。つまり、写真と同期するために小さなボタンのステップサイズを1に追加する必要があります。それがどのように引き起こされたのかわからないので、将来ピットを埋めます。不適切なポイントがある場合は、指摘してください。
書く別の方法がありますが、これはあまりお勧めしません。書くのは簡単ですが、SRCやその他の写真を保存する配列を作成するというアイデアを簡単に説明します。毎回、1つを取り出し、双方向のIMGのSRCに結合します。次にIMGを読んで、次のものになると、IMGのSRCをクリアして次のものを割り当てます。このループを使用すると、カルーセルを達成できますが、これによりHTTP要求の数が大幅に増加します。ネットワーク速度が低い場合、エクスペリエンスは非常に悪いので、私はそれをお勧めしません。
この書き方を強くお勧めします。私は少し冗長ですが、私は良い経験をしています。
<！doctype html> <html lang = "en" ng-app = "lunbo"> <head> <head> <meta charset = "utf-8"> <スクリプトsrc = "lib/angular.min.js"タイプ= "テキスト/javascript"> </script> <スクリプト> <スクリプト= "タイプ="/javascript "/javascript <title> </title> <style> *{padding：0px;マージン：0px; } div {position：relative; } div ul {position：absolute; } div ul li {list-style-type：none;位置：絶対; } div ul li a img {display：block;幅：730px;高さ：454px; } div ul.listcontent {position：absolute;左：500px;トップ：410px;幅：200px;高さ：25px; } div ul.listcontent li.list {position：relative;表示：ブロック;幅：25px;高さ：25px;フロート：左;マージン：0 5px;ボーダー：1pxソリッドブルー;テキストアライグ：センター;ラインハイト：25px;カーソル：ポインター; } .active {background：＃161616;色：#ffffff; } </style> </head> <body ng-controller = "lunbocontroller"> <div lunbo> </div> <script type = "text/ng-template" id = "lunbo.html"> <div ng-mouseleave = "start（）"> <ul switch = ""> <li ng-switch-<a href = "{{img1.href}}"> <img src = "{{img1.src}}"/> </a> </li> <li ng-switch-when = "1"> <a href = "{{img2.href}}"> <img src = "{{img2.src}}"/> </a> </li> <li ng-switch-when = "2"> <a href = "{{img3.href}}"> <img src = "{{img3.href}}" ng-switch-when = "3"> <a href = "{{img4.href}}"> <img src = "{{img4.src}}"/> </a> </li> < src = "{{img5.src}}"/> </a> </li> </ul> <ul> <li ng-click = "clickevent（0）"> 1 </li> <li ng-click = "clickevent（1）"> 2 </li> <li ng-click = "clickevent（2）"> 3 </li> < ng-click = "lickkevent（3）"> 4 </li> <li ng-click = "clickevent（4）"> 5 </li> </ul> </div> </script> </body> <script> var app = angular.module（ 'lunbo'、['nganimate']）; app.Controller（ 'lunbocontroller'、['$ scope'、 'readjson'、 'mousevent'、function（$ scope、readjson、mouseevent）{}]）; app.Factory（ 'readjson'、['$ http'、 '$ q'、function（$ http、$ q）{return {query：function（）{var deferred = $ q.defer（）; $ http（{method： 'get'、url： 'img.json'}）。 。 /*このサービスに問題があり、改善が必要です。私はまだ解決策を考えていません*/ app.factory（ 'mousevent'、function（）{return {mouseevent：function（ele1、ele2、event、done）{}}}）; app.directive（ 'lunbo'、['readjson'、 '$ timeout'、 'mousevent'、function（readjson、$ timeout、mouseevent）{return {restrict： 'ea'、templateurl： 'lunbo.html'、scope：{}、link：comprise、cromid = readjson. qury（ time = null; function（data）{scope.img1 = data [0]; scope.img2 = data [2]; scope.img4 = data [3]; scope.img5 = data [4];}） find（ "li"）。 find（ "li"）。 }]）; app.Animation（'。Fade-in '、function（）{return {enter：function（element、done）{var step = 0; var time = null; // timer var animationfunc = function（）{step+= 20; if（step> 100）{done（）; clearinterval（time）;要素（不透明度」= AnimationFunc、function（done）; element.css（ "Opacity"、1）;要約します
上記は、この記事のコンテンツ全体です。皆の勉強と仕事に役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。