摘要:輪播有的功能應該都有及以上的版本應該都可以動畫效果用的是自帶的沒有做進一步的處理專注于做過測試應該沒有功能圖片自動輪播每張圖片對應下面的小圓圈紅色代表當前選中圖片前進和后退按鈕做了節流處理代碼
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; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104629.html
摘要:項目背景圖片輪播是前端項目必有項,當前有很多效果很酷炫的輪播插件,例如。此處應該有掌聲,哈哈簡而言之,就是當需要一個簡單的輪播時,可以選用,自己寫一個組件。舉個栗子,就是我實現的這個基于實現分頁組件,移動端和端均適用哦。 項目背景 圖片輪播是前端項目必有項,當前有很多效果很酷炫的輪播插件,例如Swiper。但是當項目中的圖片輪播只需要一個很簡單的輪播樣式,比如這樣的showImg(ht...
摘要:一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用,現成的插件是省時間,拿來改改尺寸改改參數就能直接用,是現在的插件確實很強大,對于我一個剛剛學習前端的人來說,牛人寫的輪播我看懂也要花些功夫,更別說在工作中寫出來,估計寫出來以后,整個項 一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用,現成的插件1是省時間,拿來改改尺寸改改參數 就能直接用,2是現在的插件確實很強大,對于我一...
摘要:一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用,現成的插件是省時間,拿來改改尺寸改改參數就能直接用,是現在的插件確實很強大,對于我一個剛剛學習前端的人來說,牛人寫的輪播我看懂也要花些功夫,更別說在工作中寫出來,估計寫出來以后,整個項 一直以來做項目碰到輪播圖我都是去網站上找現成插件拿來用,現成的插件1是省時間,拿來改改尺寸改改參數 就能直接用,2是現在的插件確實很強大,對于我一...
閱讀 2561·2021-11-22 09:34
閱讀 3539·2021-11-15 11:37
閱讀 2341·2021-09-13 10:37
閱讀 2105·2021-09-04 16:40
閱讀 1564·2021-09-02 15:40
閱讀 2456·2019-08-30 13:14
閱讀 3326·2019-08-29 13:42
閱讀 1903·2019-08-29 13:02