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

Source: Internet
Author: User
Tags setinterval

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.