JavaScript中使用面对对象实现无缝轮播图

最新推荐文章于 2021-11-12 10:52:28 发布

「已注销」

最新推荐文章于 2021-11-12 10:52:28 发布

阅读量368

点赞数 1

文章标签： javascript js css html

本文链接：https://blog.csdn.net/mikkfe/article/details/104643527

版权

使用js实现简易的无缝轮播图，利用面向对象的功能，对轮播图进行功能拆分：
1.选择元素（属性）
2.完善布局（方法）
3.绑定事件（方法）
4.改变索引（方法）
5.设置imgbox的位置(方法)
首先需要对其进行一个布局

<body>
	<div id="box">
		<div class="imgbox">
            <a><img src="https://img.zcool.cn/community/012dd25e55d09ba801216518b3709d.png" alt=""></a>
            <a><img src="https://img.zcool.cn/community/01b67a5e55d1f1a80120a8957126ef.png" alt=""></a>
            <a><img src="https://img.zcool.cn/community/01db115e572a7aa8012165189d7874.jpg" alt=""></a>
            <a><img src="https://img.zcool.cn/community/0105515e55cf74a80120a895a76620.jpg" alt=""></a>
            <a><img src="https://img.zcool.cn/community/012dd25e55d09ba801216518b3709d.png" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
	</div>
</body>

在style里对布局进行细化

<style>
        #box{width: 1000px;height: 300px;position: relative;margin: 20px auto;overflow: hidden;}
        #box .imgbox{position: absolute;left:0;top:0;}
        .imgbox a{display: block;width: 1000px;height: 300px;float: left;}
        .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;}

    </style>

封装一个函数，在这个函数里只存放变量

function Banner(){
        // 1.选择元素（属性）
        this.left = document.getElementById("left");
        this.right = document.getElementById("right");
        this.imgbox = document.querySelector(".imgbox");
        this.child = this.imgbox.children;

        this.index = 0;
    }

prototype是函数的一个属性，叫做原型对象，是为了给将来自身所在的构造函数被new出来的实例做父级使用的，可以设置函数
init函数，用以完善布局

Banner.prototype.init = function(){
        // 2.完善布局（方法）
        this.imgbox.style.width = this.child.length * this.child[0].offsetWidth + "px";
    }

addEvent()，绑定事件

Banner.prototype.addEvent = function(){
    var that = this;
    // 3.绑定事件（方法）
    this.left.onclick = function(){
        that.changeIndex(1);
    }
    this.right.onclick = function(){
        // console.log(this);
        // console.log(this.changeIndex);
        that.changeIndex(2);
    }
}

changeIndex()，这个函数用来改变索引，并将其在绑定事件中执行

Banner.prototype.changeIndex = function(d){
    // 4.改变索引（方法）
    if(d == 1){
        if(this.index == 0){
            this.index = this.child.length-2;
            this.imgbox.style.left = -(this.child.length-1)*this.child[0].offsetWidth + "px";
        }else{
            this.index--;
        }
    }else{
        if(this.index == this.child.length-1){
            this.index = 1;
            this.imgbox.style.left = 0;
        }else{
            this.index++;
        }
    }

    this.setPos();
}

设置imgbox的位置，内部执行之前封装好的move函数

Banner.prototype.setPos = function(){
    // 5.设置imgbox的位置(方法)
    move(this.imgbox,"left",-this.index*this.child[0].offsetWidth);
}

启动

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

move()

function move(ele,attr,target){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        if(attr == "opacity"){
            var iNow = getStyle(ele,attr) * 100;
        }else{
            var iNow = parseInt(getStyle(ele,attr));
        }

        let speed = (target - iNow)/10;
        speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
        if(iNow === target){
            clearInterval(ele.t);
        }else{
            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];
    }
}

所谓面向对象编程，其实就是将面向过程的程序，分门别类，功能细化，独立的模块，根据功能之间的关系，选择执行
功能的实现，还是得面向过程；或者由其他小功能组合而成
也可用ES6新增的class实现，js代码如下：

class Banner{
    constructor(){
        // 1.选择元素（属性）
        this.left = document.getElementById("left");
        this.right = document.getElementById("right");
        this.imgbox = document.querySelector(".imgbox");
        this.child = this.imgbox.children;
    
        this.index = 0;
    }
    init(){
        // 2.完善布局（方法）
        this.imgbox.style.width = this.child.length * this.child[0].offsetWidth + "px";
    }
    addEvent(){
        var that = this;
        // 3.绑定事件（方法）
        this.left.onclick = function(){
            that.changeIndex(1);
        }
        this.right.onclick = function(){
            // console.log(this);
            // console.log(this.changeIndex);
            that.changeIndex(2);
        }
    }
    changeIndex(d){
        // 4.改变索引（方法）
        if(d == 1){
            if(this.index == 0){
                this.index = this.child.length-2;
                this.imgbox.style.left = -(this.child.length-1)*this.child[0].offsetWidth + "px";
            }else{
                this.index--;
            }
        }else{
            if(this.index == this.child.length-1){
                this.index = 1;
                this.imgbox.style.left = 0;
            }else{
                this.index++;
            }
        }
        this.setPos();
    }
    setPos(){
        // 5.设置imgbox的位置(方法)
        move(this.imgbox,"left",-this.index*this.child[0].offsetWidth);
    }
}

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

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中使用面对对象实现无缝轮播图

使用js实现简易的无缝轮播图，利用面向对象的功能，对轮播图进行功能拆分：1.选择元素（属性）2.完善布局（方法）3.绑定事件（方法）4.改变索引（方法）5.设置imgbox的位置(方法)首先需要对其进行一个布局<body> <div id="box"> <div class="imgbox"> <a>&lt...
复制链接

扫一扫