原生js面向对象实现简单轮播

ゝ一纸荒年。 2023-08-17 16:46 124阅读 0赞

平时中我习惯用jquery写轮播效果，实现过程不是很难，也很方便，为了加深对js面向对象的理解，我打算用面向对象实现一个简单的轮播，这里采用了字面量的方式实现。为了实现这个过程，我们要自己动手封装一个运动函数animate，在这里我采用的是匀速运动的方式，这种方式可能体验不是很好，后面分析js代码我在详细解释。废话不多说,先上代码。页面布局可以根据自己的习惯来。

html代码：

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./css/slide .css">
        <script src="./js/slide.js"></script>
    </head>
    <body>
        <div class="slide">
            <ul class="img-box">
                <li>
                    <img src="./img/1.jpg" alt="">
                </li>
                <li>
                    <img src="./img/2.jpg" alt="">
                </li>
                <li>
                    <img src="./img/3.jpg" alt="">
                </li>
                <li>
                    <img src="./img/4.jpg" alt="">
                </li>
                <li>
                    <img src="./img/5.jpg" alt="">
                </li>
                <div class="clear"></div>
            </ul>
            <div class="icon">
                <span class="on"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </body>
    </html>

css代码：

*{
        padding:0;
        margin: 0;
        list-style-type: none;
        text-decoration: none;
    }
    .clear{
        clear: both;
    }
    a:hover{
        text-decoration: none;
    }
    .slide{
        position: relative;
        width: 500px;
        height: 300px;
        margin:20px auto;
        overflow: hidden;
    }
    .slide .img-box{
        width: 10000px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .slide .img-box li{
        float: left;
        width: 500px;
        height: 300px;
    }
    .slide .img-box li img{
        width:100%;
        height: 100%;
    }
    .icon{
        position: absolute;
        right:8%;
        bottom: 6%;
    }
    .icon span{
        display: block;
        float: left;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: white;
        opacity: 0.7;
        margin-left: 5px;
    }
    .icon .on{
        background: orange;
        opacity: 0.7;
    }

js代码：

1.animat函数

该函数有三个参数：

ele:要移动的目标元素，我这里是ul。

xTarget:目标位置，是指ele要移动到的目标位置。

time：指animate函数中的定时器的时间间隔，这里我用的是20ms。

animate函数中采用了递归，每次执行animate函数，ele都会相对于原来的位置移动speed的距离，speed我上面给定的是25，所以整个移动过程是一个匀速运动过程，但这样会有一个不好的体验，就是目前位置和目标位置距离过大时，整个滑动过程耗时较长，因为匀速嘛，距离越长耗时越多，所以这里还给出一种算法，　speed=Math.ceil(Math.abs(xTarget - xPos) / 10)，这是速度逐渐递减的，由快到慢，距离越长，前面滑动的速度越快，这种体验会更好一些，这里我就不给出具体写法了。

2.moveIndex函数

这个函数应该很好理解，就是根据输入的index参数改变对应索引的元素class名称。

3.var that = this

这样的做的目的其实是用that变量保存调用对象中函数的那个对象本身，因为在后续的处理中，可能会用到对象slide的属性和方法，而在事件处理程序和定时器处理程序中this的指向又发生了改变，所以就率先用that变量保存好对象，以便需要的时候使用。

这样就基本实现了一个面向对象的简单轮播效果。

转载于:https://www.cnblogs.com/homeStrong/p/7901228.html