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

最新推荐文章于 2023-06-30 10:40:33 发布

arzu19740204

最新推荐文章于 2023-06-30 10:40:33 发布

阅读量203

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/homeStrong/p/7901228.html

版权

平时中我习惯用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代码：

window.onload = function () {
    function animate(ele, xTarget, time) {
        var xPos = ele.offsetLeft,  //每次执行一次运动得到ele元素相对于父容器左边界偏移的距离。
            speed = 25;  //匀速运动的速度
        if (Math.abs(xTarget - xPos) <= speed) {//接近目标位置时候进行矫正，因为移动的距离不一定是speed的整数倍，矫正后终止animate的执行。
            xPos = xTarget;
            ele.style.left = xPos + 'px';
            return false;
        }
        xPos = xPos > xTarget ? xPos - speed : xPos + speed; //轮播方向向左或者向右时的处理
        if (ele.movement) {  //保证每次只有一个定时器运行
            clearTimeout(ele.movement);
        }
        ele.style.left = xPos + 'px';
        ele.movement = setTimeout(function () { //采用递归执行animate函数直到满足程序终止条件Math.abs(Xtarget - xPos)<=speed递归才停止。
            animate(ele, xTarget, time);
        },time);
    }
    function moveIndex(spanList,index) { //根据index参数让右下方对应索引的小图标加上名称为on的class，实现高亮。
        for(var i = 0,len = spanList.length;i < len;i++){
            spanList[i].className = '';
        }
        spanList[index].className = 'on';
    }
    function autoPlay(obj){  //自动轮播函数
        if(++obj.index >= obj.aSpan.length){
            obj.index = 0;
        }
        moveIndex(obj.aSpan,obj.index);
        animate(obj.oUl,-obj.index * 500,10);
    }
    var slide = {//将轮播过程的实现封装在slide的对象中。
        init:function(){  //初始化方法
            this.oUl = document.querySelector('.img-box');
            this.aSpan = document.querySelectorAll('.icon span');
            this.index = 0;//为轮播定义一个总索引
            this.timer = null;  //页面加载自动轮播的定时器
        },
        play:function(){//通过选取右下角的小图标展示对应索引的图片。
            var that = this;
            for(var i = 0;i < this.aSpan.length;i++){
                (function(j){
                    that.aSpan[j].onmouseover = function(){
                        that.index = j;
                        moveIndex(that.aSpan,that.index);
                        animate(that.oUl,-that.index * 500,10);
                    }
                })(i)
            }
        },
        autoSlide:function(){ //页面加载完即开始自动轮播
            var that = this;
            this.timer = setInterval(function(){
                 autoPlay(that);
            },3000);    
        },
        hover:function(){ //该方法主要为了实现箭头放在轮播区域停止自动轮播，移开继续自动轮播的功能。
            var that = this;
            var oSlide = document.querySelector('.slide');
            oSlide.onmouseover = function(){
                clearInterval(that.timer);
            }
            oSlide.onmouseout = function(){
                that.timer = setInterval(function(){
                 autoPlay(that);
            },3000);  
            }
        }
    }
    //通过对象调用对象上的方法
    slide.init();
    slide.play();
    slide.autoSlide();
    slide.hover();
}

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

arzu19740204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js面向对象实现简单轮播

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

扫一扫