Using Angularjs to realize the _angularjs of the home page wheel-seeding Chart of Beijing-east

Let's take a look at the effect chart.

Actually, it's quite simple to write a carousel map, I think of two ways to achieve the carousel map (in fact, the subdivision is 5, but two of them is the operation of Dom native, three is the use of Angularjs animation, all grouped into two categories), and so I write out, we have a good understanding of it.

Then I'll write one, the first is not using Angularjs animation module, only use instructions to complete the animation switch. Here is the operation of DOM elements in the instructions, super easy.

Sample code

<! DOCTYPE html>  

[
 {
 "href": "http://www.google.com",
 "src": "img/5.jpg",
 "alt": "5"
 },
 {
 "href": "http ://www.google.com ",
 src": "img/6.jpg",
 "alt": "6"
 },
 {
 "href": "http://www.google.com",
 "src": "img/7.jpg",
 "alt": "7"
 },
 {
 "href": "http://www.google.com",
 "src": "IMG/8." JPG ",
 " alt ":" 8 "
 },
 {
 " href ":" http://www.google.com ",
 " src ":" img/9.jpg ",
 " alt ":" 9 "
 }
]

Look at the end of the instructions is not very simple ah, is through the command of the link function in the element object call Angularjs itself encapsulated jquery function to complete.

Another kind is

Link: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"). EQ (step). addclass ("active");
    },1000)
   }
 }

If you want to transition effects, you can acive add a CSS3 transition animation to the class.

This is the use $http of and $q to implement a deferred asynchronous pull data, through this combination of functions can make function more robust, but also more convenient monitoring functions. I will spend time to explain the content of Angularjs $q and jquery, in fact, the $Deferred principle is similar, all realize the promise operation.

The difficulty of using JavaScript to implement the method is how to achieve the increase and decrease of elements, so as to trigger the Angularjs animation effect. This one, but in the beginning of the run there is a small flaw, that is, the small button step size must be added 1, and the photo synchronization. Do not know how to cause, later come to landfills, if there are improper places, welcome to point out.

There is a way of writing, I do not recommend, although it is very good to write, I think about it, is to build an array, to store the picture of SRC and other information, each time from the inside out, with two-way binding to the IMG SRC, now read IMG, when to the next time, the img src empty, and assigns the next value. In this cycle, although it can also do the carousel, but this greatly increased the number of HTTP requests, in the low speed of the situation, the experience is not good, I do not recommend.

All I recommend this type of writing, although long-winded, but the experience is good.

<! DOCTYPE html>  

Summarize

The above is the entire content of this article, I hope that everyone's study and work can have some help, if there is doubt you can message exchange.