新聞公告滾動
//template

<div id="news">
    <div id="scrollBox" [class.scroll_top]="flag">
        <span *ngFor="let item of news">{{item}}</span>
    </div>
</div>

//css

#news{
    position: relative;
    overflow: hidden;
}
#scrollBox{
    position: absolute; 
    left: 0; 
    top: 0;
}
#scrollBox span{
    display: block;
    height: 2rem;
    line-height: 2rem;
}
.scroll_top {
    transition: all 0.5s;     //0.5s向上過渡2rem
    margin-top: -2rem;
}
 

//ts

flag:boolean=false;
news=['aaaa','bbbb','cccc','dddd'];
timer=null;

ngOnInit(){
   clearInterval(this.timer);
   this.timer= setInterval(() => {
       this.showMarquee();
   }, 3000);
}

showMarquee() {
   this.flag= true;    
   setTimeout (() => {
       this.news.push(this.news[0]);
       this.news.shift();
       this.flag= false;
   }, 500);
}
 

圖片輪播
index.html引入<link rel="stylesheet" href="assets/css/swiper.min.css">和<script src="assets/js/swiper.min.js"></script>

//template

<div class="swiper-container">  
	<div class="swiper-wrapper">  
		<div class="swiper-slide">slider1</div>
		<div class="swiper-slide">slider2</div>
		<div class="swiper-slide">slider3</div>                      
	</div>
</div>
 

//css

.swiper-container {  
    width: 100%;  
    height: 100%;  
    margin: 0 auto;    
}  
.swiper-slide {  
    text-align: center;  
    font-size: 18px;  
    //background: #fff;
    /* Center slide text vertically */  
    display: -webkit-box;  
    display: -ms-flexbox;  
    display: -webkit-flex;  
    display: flex;  
    -webkit-box-pack: center;  
    -ms-flex-pack: center;  
    -webkit-justify-content: center;  
    justify-content: center;  
    -webkit-box-align: center;  
    -ms-flex-align: center;  
    -webkit-align-items: center;  
    align-items: center;  
}

//ts

let swipers = new Swiper('.swiper-container', {                    
	"autoplay":{
	  "delay": 3000,
	  "stopOnLastSlide": false,
	  "disableOnInteraction": false
	}                                                                
});