js定时器

	<script type="text/javascript">
		// 1.显示图片
		class ShowPic{
			imgList
			constructor(){
				this.imgList = document.querySelector('.imgList')
			}
			setNum(n){
				// 0   1    2     3
				// 0%  25%  50%  75%
				let per = n/4*100
				this.imgList.style.transform = `translateX(-${per}%)`
			}
		}
		let show = new ShowPic()

		// 2.控制i的值
		class Index{
			i = 0
			inc(){
				this.i++
				if (this.i>3) {
					this.i = 0
				}
				return this.i
			}
			dec(){
				this.i--
				if (this.i<0) {
					this.i = 3
				}
				return this.i
			}
		}
		let index = new Index()

		// 3.定时器.开启,停止
		class Time{
			timeId
			start(){
				this.timeId = setInterval(()=>{
					show.setNum( index.inc() )
				},2000)
			}
			stop(){
				clearInterval(this.timeId)
			}
		}
		let time = new Time()

		//
		time.start()
	</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值