面向对象的轮播图

面向对象的轮播图

轮播图是网页中一种比较常见的功能，接下来我们使用面向对象的方法来实现点击左右按钮使轮播图进行轮播，以及点击相应的数字使轮播图出现对应的图片

分析： 当前的布局方式，可以采取同时控制两个索引的方式，让图片动起来

一个索引表示要走的图片，另一个索引表示要进来的图片。接下来选择元素，绑定事件，计算索引，根据索引移动对应的图片

body部分代码

    <div id="box">
		<div class="imgbox">
            <a><img src="img/banner1.jpg" alt=""></a>
            <a><img src="img/banner2.jpg" alt=""></a>
            <a><img src="img/banner3.jpg" alt=""></a>
            <a><img src="img/banner4.jpg" alt=""></a>
            <a><img src="img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
        <div class="list"></div>
	</div>

css部分代码

    #box{
        width: 1000px;
        height: 300px;
        position: relative;
        margin: 20px auto;
        overflow: hidden;
    }
    .imgbox a{
        display: block;
        width: 1000px;
        height: 300px;
        position: absolute;
        left: 1000px;
        top: 0;
    }
    .imgbox a:first-child{
        left: 0;
    }
    .imgbox img{
        width: 1000px;
        height: 300px;
    }
    .btns input{
        width: 40px;
        height: 40px;
        background: rgba(200,200,200,0.6);
        border: none;
        position: absolute;
        top: 130px;
        z-index: 1;
    }
    #left{
        left:0;
    }
    #right{
        right: 0;
    }
    .list{
        width: 200px;
        height: 30px;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        display: flex;
    }
    .list span{
        justify-content: space-around;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        color: red;
    }
    .active{
        background: skyblue;
    }

js部分代码

    class Banner{
		constructor(){
            // 1.选择元素（属性）
			this.img=document.querySelectorAll("a");
			this.left=document.getElementById("left");
			this.right=document.getElementById("right");
			 // 假设点击的是右按钮（其实无所谓，假设谁都行）
			 // 要进来的图片
			this.iNow=0
			// 要走的图片
			this.iPrev=this.img.length-1;
			this.list=document.querySelector(".list");
		}
		addEvent(){
			var that=this;
            // 2.绑定事件（方法）
			this.left.onclick=function(){
				that.changeIndex(1);
			}
			this.right.onclick=function(){
				that.changeIndex(-1);
			}
            // L3.因为事先list中没有内容，使用事件委托绑定事件
			this.list.onclick=function(eve){
				var e = eve || window.event;
				var tar = e.target || e.srcElement;
				if(tar.tagName=="SPAN"){
                     // L4.触发事件时，执行改变索引，同时将点前点击的span传入
					that.listChangeIndex(tar);
				}
			}
		}
		move(direct){
            // 根据左右按钮传入的状态：左1，右-1
            // 利用乘法
            // 改变不同按钮的方向问题
			this.img[this.iPrev].style.left=0;
			move(this.img[this.iPrev],{left:this.img[0].offsetWidth*direct});
			this.img[this.iNow].style.left=-this.img[0].offsetWidth*direct+"px";
			move(this.img[this.iNow],{left:0});
			this.setActive();
		}
		changeIndex(direct){
            // 3.改变索引（方法）
			if(direct==1){
				if(this.iNow==0){
                    // 当点击左按钮，到第0张时，再点，设置成最后一张
					this.iNow=this.img.length-1;
                    // 同时第0张走了
					this.iPrev=0;
				}else{
                    // 默认情况下，进来的索引在减小
					this.iNow--;
                     // 要走的索引永远是进来的索引+1
					this.iPrev=this.iNow+1;
				}
			}else{
				if(this.iNow==this.img.length-1){
                    // 当点击右按钮，到第最后一张时，再点，设置成第0张
					this.iNow=0;
                    // 同时最后一张走了
					this.iPrev=this.img.length-1;
				}else{
                    // 默认情况下，进来的索引在增加
					this.iNow++;
                    // 要走的索引永远是进来的索引-1
					this.iPrev=this.iNow-1;
				}
			}
            // 4.根据索引开始运动
			this.move(direct);
		}
		createEle(){
            // L1.创建对应图片数量的span，同时编号
			var str=``;
			for(var i=0;i<this.img.length;i++){
				 str += `<span index='${i}'>${i+1}</span>`;
			}
			this.list.innerHTML=str;
            // L2.设置默认的当前项
			this.setActive();
		}
		setActive(){
			for(var i=0;i<this.img.length;i++){
				this.list.children[i].className="";
			}
			this.list.children[this.iNow].className="active";
		}
		listChangeIndex(tar){
            // L5.确定要走的索引和要进来的索引
            // this.iNow    要走的
            // 拿到点击的span的编号     要进来的
			var index=parseInt(tar.getAttribute("index"));
            // L6-1.判断方向
			if(index > this.iNow){
                // L7-1.向左运动
                this.listMove(1,index);
            }
            // L6-2.判断方向
            if(index < this.iNow){
                // L7-2.向右运动
                this.listMove(-1,index);
            }
            // L8.将当前点击的索引设置成下次要走的索引
            this.iNow = index;
            // L9.根据修改之后的索引，设置当前项
            this.setActive();
		}
		listMove(direct,index){
            // this.iNow走
                // 从哪走，走到哪
            this.img[this.iNow].style.left = 0;
            move(this.img[this.iNow],{left:-1000 * direct})
            // index进来
                // 从哪进来，进到哪
            this.img[index].style.left = 1000 * direct + "px";
            move(this.img[index],{left:0});
        }
	}

	var b = new Banner();
	b.addEvent();
	b.createEle();

    //运动的封装
	function move(ele,obj){
	    clearInterval(ele.t);
	    ele.t = setInterval(()=>{
	        for(var attr in obj){
	            if(attr == "opacity"){
	                var iNOw = getStyle(ele,attr)*100;
	            }else{
	                var iNOw = parseInt(getStyle(ele,attr));
	            }
	            let speed = (obj[attr] - iNOw)/10;
	            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
	            if(attr == "opacity"){
	                ele.style.opacity = (iNOw + speed)/100;
	            }else{
	                ele.style[attr] = iNOw + speed + "px";
	            }
	        }
	    },30);
	}

	function getStyle(ele,attr){
	    if(ele.currentStyle){
	        return ele.currentStyle[attr];
	    }else{
	        return getComputedStyle(ele,false)[attr];
	    }
	}

以上就是对轮播图功能的一个实现，图片路径以自己的为准