原生JS实现轮播图，封装动画函数

视频讲解可观看B站视频
https://www.bilibili.com/video/BV1f441117vj/

封装 animate 动画函数

function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, null)[attr];
    }
}
function animate(obj,json,callback){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var isStop = true;
        for(var attr in json){
            var now = 0;
            if(attr == 'opacity'){
                now = parseInt(getStyle(obj,attr)*100);
            }else{
                now = parseInt(getStyle(obj,attr));
            }
            var speed = (json[attr] - now) / 8;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            var cur = now + speed;
            if(attr == 'opacity'){
                obj.style[attr] = cur / 100;
            }else{
                obj.style[attr] = cur + 'px';
            }
            if(json[attr] !== cur){
                isStop = false;
            }
        }
        if(isStop){
            clearInterval(obj.timer);
            callback&&callback();
        }
    }, 30)
}

轮播图 HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>carousel</title>
    <link rel="stylesheet" href="style.css">
    <script src="animate.js"></script>
</head>
<body>
    <div class="box" id="box">
        <div class="slider" id="slider">
            <div class="slide"><img src="imgs/banner_05.jpg" alt=""></div>
            <div class="slide"><img src="imgs/banner_01.jpg" alt=""></div>
            <div class="slide"><img src="imgs/banner_02.jpg" alt=""></div>
            <div class="slide"><img src="imgs/banner_03.jpg" alt=""></div>
            <div class="slide"><img src="imgs/banner_04.jpg" alt=""></div>
            <div class="slide"><img src="imgs/banner_05.jpg" alt=""></div>
            <div class="slide"><img src="imgs/banner_01.jpg" alt=""></div>
        </div>
        <span id="left"><</span>
        <span id="right">></span>
        <ul class="nav" id="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var box = document.getElementById('box');
        var oNavlist = document.getElementById('nav').children;
        var slider = document.getElementById('slider');
        var left = document.getElementById('left');
        var right = document.getElementById('right');
        var index = 1;
        var timer;
        var isMoving = false;
        box.onmouseover = function(){
            animate(left,{opacity:50})
            animate(right,{opacity:50})
            clearInterval(timer)
        }
        box.onmouseout = function(){
            animate(left,{opacity:0})
            animate(right,{opacity:0})
            timer = setInterval(next, 3000);
        }
        right.onclick = next;
        left.onclick = prev;
        for( var i=0; i<oNavlist.length; i++ ){
            oNavlist[i].index = i;
            oNavlist[i].onclick = function(){
                index = this.index+1;
                navmove();
                animate(slider,{left:-1200*index});
            }
        }
        function next(){
            if(isMoving){
                return;
            }
            isMoving = true;
            index++;
            navmove();
            animate(slider,{left:-1200*index},function(){
                if(index==6){
                    slider.style.left = '-1200px';
                    index = 1;
                }
                isMoving = false;
            });
        }
        function prev(){
            if(isMoving){
                return;
            }
            isMoving = true;
            index--;
            navmove();
            animate(slider,{left:-1200*index},function(){
                if(index==0){
                    slider.style.left = '-6000px';
                    index = 5;
                }
                isMoving = false;
            });
        }
        function navmove(){
            for( var i=0; i<oNavlist.length; i++ ){
                oNavlist[i].className = "";
            }
            if(index >5 ){
                oNavlist[0].className = "active";
            }else if(index<=0){
                oNavlist[4].className = "active";
            }else {
                oNavlist[index-1].className = "active";
            }
        }
        timer = setInterval(next, 3000);
    </script>
</body>
</html>

轮播图 CSS

*{
    padding: 0;
    margin: 0;
}
ul,li{
    list-style: none;
}
.box{
    width: 1200px;
    height: 397px;
    border: 1px solid red;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.slider{
    width: 8400px;
    position: absolute;
    left: -1200px;
}
.slide{
    width: 1200px;
    overflow: hidden;
    float: left;
}
.box>span{
    display: block;
    width: 30px;
    height: 50px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    top: 175px;
    line-height: 50px;
    background: rgb(255,0,0);
    font-size: 30px;
    position: absolute;
    /* display: none; */
    opacity: 0;
}
#left{
    left: 30px;
}
#right{
    right: 30px;
}
.nav{
    position: absolute;
    left: 500px;
    bottom: 20px;
}
.nav>li{
    float: left;
    width: 20px;
    height: 20px;
    background: #ccc;
    cursor: pointer;
    margin: 0 10px;
    border-radius: 50%;
}
.nav .active{
    background: red;
}

更多内容可扫码关注公众号【前端小猿】

logo.jpg

最后编辑于：2020.05.07 11:11:25