先来看看效果图
其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是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">总结
以上就是这篇文章的全部内容,希望对大家的学习和工作能有一定的帮助,如果有疑问大家可以留言交流。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。