摘要:轮播有的功能应该都有及以上的版本应该都可以动画效果用的是自带的没有做进一步的处理专注于做过测试应该没有功能图片自动轮播每张图片对应下面的小圆圈红色代表当前选中图片前进和后退按钮做了节流处理代码
carousel works!
import { Component, OnInit } from "@angular/core"; import {trigger,style,transition,query,animate,group} from "@angular/animations" @Component({ selector: "app-carousel", templateUrl: "./carousel.component.html", styleUrls: ["./carousel.component.css"], animations:[ trigger("carousel",[ transition(":increment",[ group([ query(":enter",[ style({transform:"translateX(-100%)"}), animate("1s") ]), query(":leave",[ animate("1s",style({transform:"translateX(100%)"})) ]) ]) ]), transition(":decrement",[ group([ query(":enter",[ style({transform:"translateX(100%)"}), animate("1s") ]), query(":leave",[ animate("1s",style({transform:"translateX(-100%)"})) ]) ]) ]), ]) ] }) export class CarouselComponent implements OnInit { url:string="../../../assets/" imgs=[ {id:1,name:"1.jpg",state:true}, {id:2,name:"2.jpg",state:false}, {id:3,name:"3.jpg",state:false} ] state=0; id:number; i=0; switch=true execTime:number constructor() { } fn(){ this.i++; if(this.i>this.imgs.length-1){ this.i=0; } this.imgs.forEach(val=>{val.state=false}) this.imgs[this.i].state=true; this.state+=0.1; } ngOnInit() { this.id=setInterval(this.fn.bind(this),3000) } stop(){ clearInterval(this.id) } start(){ this.id=setInterval(this.fn.bind(this),3000) } circleEnter(id){ //console.log(id); this.i=id-1; this.imgs.forEach(val=>{val.state=false}) this.imgs[id-1].state=true; //this.state+=0.1; this.stop(); } circleLeave(){ this.start(); } go(){ this.throttle(this.fn.bind(this),1500) //this.fn() } back(){ let fn=function(){ //console.log("exec fn"); this.i--; if(this.i<0){ this.i=this.imgs.length-1; } this.imgs.forEach(val=>{val.state=false}) this.imgs[this.i].state=true; this.state-=0.1; } this.throttle(fn.bind(this),1500) } throttle(fn,interval){ if(new Date().getTime()-this.execTime>interval){this.switch=true} console.log(this.switch); if(this.switch){ fn(); this.switch=false; this.execTime=new Date().getTime(); } } }css
ul{ position:relative; height:200px; } .imgP{ position:absolute; list-style:none; } .circle{ width:10px; height:10px; border-radius:50%; border:1px solid #000; float:left; } .color{ background-color:red; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104629.html
摘要:项目背景图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如。此处应该有掌声,哈哈简而言之,就是当需要一个简单的轮播时,可以选用,自己写一个组件。举个栗子,就是我实现的这个基于实现分页组件,移动端和端均适用哦。 项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的showImg(ht...
摘要:一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件是省时间,拿来改改尺寸改改参数就能直接用,是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,更别说在工作中写出来,估计写出来以后,整个项 一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件1是省时间,拿来改改尺寸改改参数 就能直接用,2是现在的插件确实很强大,对于我一...
摘要:一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件是省时间,拿来改改尺寸改改参数就能直接用,是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,更别说在工作中写出来,估计写出来以后,整个项 一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件1是省时间,拿来改改尺寸改改参数 就能直接用,2是现在的插件确实很强大,对于我一...
阅读 2516·2021-11-22 09:34
阅读 3523·2021-11-15 11:37
阅读 2320·2021-09-13 10:37
阅读 2089·2021-09-04 16:40
阅读 1406·2021-09-02 15:40
阅读 2444·2019-08-30 13:14
阅读 3297·2019-08-29 13:42
阅读 1837·2019-08-29 13:02