DDR爱好者之家

利用AngularJs实现京东首页轮播图效果
站长资源 2024/11/28 佚名
43 1538
DDR爱好者之家 Design By 杰米

先来看看效果图

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

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

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

示例代码

<!DOCTYPE html>
<html lang="en" ng-app="lunbo">
<head>
 <meta charset="UTF-8">
 <script src="/UploadFiles/2021-04-02/angular.min.js">





[
 {
 "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"
 }
]





看指令的最后是不是很简单啊，就是通过指令的link函数中的element对象调用angularjs自身封装的jquery函数来完成的。


另外一种是





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)
   }
 }





如果要过渡效果，可以在acive类中加入css3的过渡动画。


这里面是用$http和$q来实现了一个延迟异步拉取数据，通过这样组合函数可以使函数功能更加健壮，也更方便监控函数。我以后会花时间专门来解释angularjs的$q和jquery的$Deferred的内容，其实原理差不多，都实现了promise操作。




用JavaScript的实现方法的难点，在于如何实现元素的增加和减少，这样才能触发AngularJs的动画效果。这次写了一个，但是在开始运行的时候有个小瑕疵，就是小按钮的步长一定要加上1，才和照片同步。不知道怎么造成的，以后再来填坑，如有不妥的地方，欢迎指出。


还有一种写法，我不太推荐，虽然很好写，我把思路大概说一下，就是建立一个数组，用来存放图片的src等信息，每次从里面取出一个，用双向绑定到img的src上，当下现读取img，当到下一个的时候，把img的src清空，并且赋值下一个。以此循环，这样虽然也可以做到轮播，但是这样极大的增加了http请求数量，在网速低的情况下，体验很不好，我不推荐。




所有我很推荐我这种写法，虽然啰嗦点，但是体验好啊。





<!DOCTYPE html>
<html lang="en" ng-app="lunbo">
<head>
 <meta charset="UTF-8">
 <script src="/UploadFiles/2021-04-02/angular.min.js">


总结




以上就是这篇文章的全部内容，希望对大家的学习和工作能有一定的帮助，如果有疑问大家可以留言交流。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米