利用AngularJs实现京东首页轮播图效果

于 2018-02-04 01:05:47 发布
阅读量408 收藏 1
点赞数
分类专栏： AngularJs 文章标签： AngularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanyu12/article/details/79250602
版权
本文介绍了两种利用AngularJs实现轮播图的方法，一种不依赖AngularJS动画模块，仅使用指令操作DOM元素；另一种结合CSS3过渡动画，实现平滑过渡效果。同时，文章讨论了JavaScript实现轮播图的难点，并对比了一种不推荐的实现方式，强调了体验优化的重要性。
摘要由CSDN通过智能技术生成

其实写一个轮播图还是蛮简单的，我想了两种种方法，来实现轮播图（实际上细分是5种，但是其中两种是操作dom原生，三种是利用AngularJs的动画，所有归为两大类），等我写出来，大家好好理解一下就好。

那我先写一种，第一种是不使用angularjs的动画模块，只使用指令来完成动画的切换。在这里面就是在指令里操作dom元素，超级easy。

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
< html  lang = "en"  ng-app = "lunbo" >
< head >
  < meta  charset = "UTF-8" >
  < script  src = "lib/angular.min.js"  type = "text/javascript" ></ script >
  < script  src = "lib/angular-animate.js"  type = "text/javascript" ></ script >
  < 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"
     class = "fade-in style hidden"  >
     < a  href = "{ {img.href}}" >< img  src = "{ {img.src}}"  alt = "" /></ a ></ li >
   </ ul >
  </ 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'
     }).success(function (data, status, header, config) {
      deferred.resolve(data);
     }).error(function (data, status, header, config) {
      deferred.reject(data);
     });
     return deferred.promise;
    }
   }
最低0.47元/天 解锁文章
幻羽公子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最新麦子学院33GWeb前端+Web前端开发从入门到精通完整版
weixin_43761249的博客
11-27 750
课程介绍   一共超过33G的整套麦子学院Web前段视频教程，共分为4大阶段循序渐进的进行逐步深入的解读，从基础知识入门到后期的项目实战开发 对于想从事Web前端学习和开发工作的朋友来说是非常理想的一套学习课程，非常值得推荐给大家！ -------------------课程目录-------------------   第一阶段 01.Web前端开发之Photoshop切片   1.什...
最新麦子学院33G完整版Web前端Web前端开发从入门到精通
qq_43662859的博客
11-12 606
  课程介绍   一共超过33G的整套麦子学院Web前段视频教程，共分为4大阶段循序渐进的进行逐步深入的解读，从基础知识入门到后期的项目实战开发 对于想从事Web前端学习和开发工作的朋友来说是非常理想的一套学习课程，非常值得推荐给大家！-------------------课程目录------------------- 第一阶段 01.Web前端开发之Photoshop切片   1.什么...
简单实现AngularJS轮播图效果
12-09
本文实例为大家分享了AngularJS轮播图的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> </head> <body> <div ng-cont
AngularJS实现轮播图
知识中转站
01-11 7199
AngularJS carousel .carousel-indicators li{ margin-left: 5px; margin-right: 5px; }
AngularJs实现轮播图
Smile李先生
01-11 2957
AngularJS carousel                                                                                                             Slide {{$index}}                         {{slide.text
angularjs实现首页轮播图
weixin_30649641的博客
04-13 130
angularjs实现首页轮播图 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</titl...
angularjs实现首页轮播图效果
11-28
本文实例为大家分享了angularjs轮播图展示的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="CarouselDe
Angularjs中使用轮播图指令swiper
10-19
主要介绍了Angularjs中使用轮播图指令swiper的相关知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
angular实例应用-京东手机端
12-21
angularJS实例应用,实现购物车的应用,即添加、删除、结算等功能，应用路由实现桥连接，简单方便的框架
Angular 实现一个完整的toDoList（待办事项） 以及类似京东App搜索缓存数据功能
03-05
Angular 实现一个完整的toDoList（待办事项） 以及类似京东App搜索缓存数据功能
AngularJS轮播图
weixin_33849215的博客
02-25 94
2019独角兽企业重金招聘Python工程师标准>>> ...
angularjs 轮播图
qq_33182945的博客
01-11 2410
Carousel                                                                 Slide {{$index}}               {{slide.text}}                                                 Add Slide  
AngularJS：实现轮播图效果
weixin_30597269的博客
06-11 214
实现步骤如下： 要实现这个功能，可以http://angular-ui.github.io/bootstrap/ 中的控件实现。实现步骤如下： 1. 下载ui-bootstrap.js程序http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js 目前版本是0.11.0 2. 在HTML中引入script ...
angular轮播图
weixin_30652491的博客
03-25 566
还是直接上代码比较好 <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/animate....
AngularJS实现京东首页轮播图：无动画指令方法
本文档主要介绍了如何在AngularJS框架中实现京东首页类似的轮播图效果。作者首先提到了轮播图实现的两种主要方法：一种是使用AngularJS的动画模块，另一种则是不依赖动画模块，仅通过指令操作DOM元素来实现动画切换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值