资讯专栏INFORMATION COLUMN

功能齐全的轮播---基于angular7

longshengwang / 1617人阅读

摘要:轮播有的功能应该都有及以上的版本应该都可以动画效果用的是自带的没有做进一步的处理专注于做过测试应该没有功能图片自动轮播每张图片对应下面的小圆圈红色代表当前选中图片前进和后退按钮做了节流处理代码

轮播有的功能,应该都有
angular2及以上的版本应该都可以
动画效果用的是angular自带的animations
css没有做进一步的处理,专注于js
做过测试应该没有bug
功能 1.图片自动轮播 2.每张图片对应下面的小圆圈,红色代表当前选中图片 3.前进和后退按钮做了节流处理 代码 html

carousel works!

js
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

相关文章

  • 基于vue实现swipe轮播组件

    摘要:项目背景图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如。此处应该有掌声,哈哈简而言之,就是当需要一个简单的轮播时,可以选用,自己写一个组件。举个栗子,就是我实现的这个基于实现分页组件,移动端和端均适用哦。 项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的showImg(ht...

    Enlightenment 评论0 收藏0
  • 一直以来都没直视轮播

    摘要:一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件是省时间,拿来改改尺寸改改参数就能直接用,是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,更别说在工作中写出来,估计写出来以后,整个项 一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件1是省时间,拿来改改尺寸改改参数 就能直接用,2是现在的插件确实很强大,对于我一...

    wangzy2019 评论0 收藏0
  • 一直以来都没直视轮播

    摘要:一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件是省时间,拿来改改尺寸改改参数就能直接用,是现在的插件确实很强大,对于我一个刚刚学习前端的人来说,牛人写的轮播我看懂也要花些功夫,更别说在工作中写出来,估计写出来以后,整个项 一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用,现成的插件1是省时间,拿来改改尺寸改改参数 就能直接用,2是现在的插件确实很强大,对于我一...

    FuisonDesign 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<