javascript輪播圖

css

 .item li{
            list-style: none;
            width: 590px;
            height: 340px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;

        }
        img{
            width: 100%;
            height: 100%;
        }
        .leftBtn{
            position: absolute;
            left: 0;
            top: 0;
        }

        .rightBtn{
            position: absolute;
            right: 0;
            top: 0;
        }
        div{
            position: relative;
            width: 590px;
            height: 340px;
        }
        .page{
            position: absolute;
            bottom: 50px;
            left: 200px;
            height: 30px;
            /*width: 300px;*/
        }
        .page li{
            float: left;
            width: 30px;
            height: 30px;
            list-style: none;
            background: red;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;

        }

<div class="box">
			<ul class="item">
				<li style="opacity: 1"><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
				<li><img src=""></li>
			</ul>
			<button class="leftBtn">&lt;</button>
			<button class="rightBtn">&gt;</button>

			<ul class="page">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>

		</div>

class LunBo {
	constructor(sel) {
		this.sel = sel;
		this.el = document.querySelector(this.sel)
		this.rightBtn = this.el.querySelector('.rightBtn')
		this.leftBtn = this.el.querySelector('.leftBtn')
		this.pageLis = this.el.querySelectorAll('.item li')
		this.pointLis = this.el.querySelectorAll('.page li')

		this.pageNum = 0; //記錄當前顯示哪一張
		this.showPoint()

		//右按鈕增加dengji
		this.btnsEvent()
		// this.autoPlay()
		this.pointEvent()
	}
	pointEvent() {
		for (let i = 0; i < this.pointLis.length; i++) {
			this.pointLis[i].onclick = () => {
				animate(this.pageLis[this.pageNum], {
					opacity: 0
				})
				this.pageNum = i;
				animate(this.pageLis[this.pageNum], {
					opacity: 1
				})
				this.showPoint()
			}
		}
	}
	showPoint() {
		for (let i = 0; i < this.pointLis.length; i++) {
			this.pointLis[i].style.backgroundColor = 'red'
		}
		this.pointLis[this.pageNum].style.backgroundColor = 'white'
	}
	prev() {
		let that = this
		console.log('111')
		// that.pageLis[that.pageNum].style.opacity=0
		animate(that.pageLis[that.pageNum], {
			opacity: 0
		})
		//播放下一張圖片
		that.pageNum--;
		if (that.pageNum == -1) {
			that.pageNum = 4
		}
		console.log(that.pageNum)
		// that.pageLis[that.pageNum].style.opacity=1
		animate(that.pageLis[that.pageNum], {
			opacity: 1
		})
		that.showPoint()
	}
	next() {
		let that = this;

		console.log('111')
		// that.pageLis[that.pageNum].style.opacity=0
		animate(that.pageLis[that.pageNum], {
			opacity: 0
		})
		//播放下一張圖片
		that.pageNum++;
		if (that.pageNum == 5) {
			that.pageNum = 0
		}
		console.log(that.pageNum)
		// that.pageLis[that.pageNum].style.opacity=1
		animate(that.pageLis[that.pageNum], {
			opacity: 1
		})

		//根據頁碼 顯示對應的小圓點
		this.showPoint()
	}
	//右按鈕增加事件
	btnsEvent() {
		let that = this;
		this.rightBtn.onclick = function() {
			that.next()
		}
		this.leftBtn.onclick = function() {
			that.prev()
		}
	}
	//自動播放
	autoPlay() {
		this.timer = setInterval(() => {
			this.next()
		}, 2000)
		this.el.onmouseenter = () => {
			clearInterval(this.timer)
		}
		this.el.onmouseleave = () => {
			this.timer = setInterval(() => {
				this.next()
			}, 2000)
		}
	}
}
class TBLunBo extends LunBo {
	constructor(sel) {
		super(sel);
		this.oUl = this.el.querySelector('.item')
		let cloneNode = this.pageLis[0].cloneNode(true)
		this.oUl.appendChild(cloneNode)
	}
	next() {
		let that = this;
		//播放下一張圖片
		that.pageNum++;
		if (that.pageNum == 6) {
			// that.pageNum = 0
			this.oUl.style.left = 0
			that.pageNum = 1
		}
		console.log(that.pageNum)
		animate(this.oUl, {
			left: -that.pageNum * 590
		})
		//根據頁碼 顯示對應的小圓點
		this.showPoint()
	}
	prev() {
		let that = this
		//播放下一張圖片
		that.pageNum--;
		if (that.pageNum == -1) {
			this.oUl.style.left = -5*590+'px'
			this.pageNum = 4
		}
		console.log(that.pageNum)
		// that.pageLis[that.pageNum].style.opacity=1
		animate(that.oUl, {
			left: -590*this.pageNum
		})
		that.showPoint()
	}
	pointEvent() {
		for (let i = 0; i < this.pointLis.length; i++) {
			this.pointLis[i].onclick = () => {

				this.pageNum = i;
				animate(this.oUl, {
					left: -590 * this.pageNum
				})
				this.showPoint()
			}
		}
	}
	showPoint() {
		for (let i = 0; i < this.pointLis.length; i++) {
			this.pointLis[i].style.backgroundColor = 'red'
		}
		if(this.pageNum==5){	
					this.pointLis[0].style.backgroundColor = 'white'			
		}else{
					this.pointLis[this.pageNum].style.backgroundColor = 'white'			
		}
	}
}

<script>
			new LunBo('.box')

			function animate(div, obj) {
				clearInterval(div.timer);
				div.timer = setInterval(function() {
					var flag = true; 
					for (var key in obj) {
						var target = obj[key];
						if (key == 'opacity') {
							var speed = (target - parseFloat(getStyle(div)[key])) * 100 / 8;
							speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
							var op = parseFloat(getStyle(div)[key]) + speed / 100;
							div.style[key] = op;
							if (parseFloat(getStyle(div)[key]) != target) {
								flag = false;
							}
						} else {
							var speed = (target - parseInt(getStyle(div)[key])) / 8;
							speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
							div.style[key] = parseInt(getStyle(div)[key]) + speed + 'px';
							if (parseInt(getStyle(div)[key]) != target) {
								flag = false;
							}
						}
					}
					//必須等到所有的 屬性都到達目的地 才能結束定時器
					if (flag == true) {
						clearInterval(div.timer);
					}
				}, 30);
			}

			function getStyle(ele) {
				if (ele.currentStyle) {
					return ele.currentStyle;
				} else {
					return getComputedStyle(ele, null);
				}
			}
		</script>

新人初來，有很多欠缺需要大家多多指教，逆疫而戰大家加油