原生JS实现旋转木马轮播图特效

大概是这个样子：

首先来简单布局一下（emm...随便弄一下吧，反正主要是用js来整的）

<!DOCTYPE html>
<html lang="en">
<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>旋转木马轮播图</title>
    <script src="js/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, li {
            list-style: none;
        }
        .wrap {
            margin: 0 auto;
            width: 1050px;
        }
        .slider {
            position: relative;
            margin: 50px auto;
            height: 400px;
        }
        .slider li {
            position: absolute;
        }
        .slider li img {
            width: 100%;
        }
        .slider .arrow-l,
        .slider .arrow-r{
            position: absolute;
            top: 0;
            display: none;
            width: 80px;
            height: 400px;
            background-size: 80px;
            cursor: pointer;
            opacity: 0.8;
            z-index: 99;
        }
        .arrow-r {
            right: 80px;
            background: url(img/next.png) no-repeat 0;
        }
        .arrow-l {
            left: 80px;
            background: url(img/prev.png) no-repeat 0;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="slider">
            <ul>
                <li><img src="img/img1.jpg" alt=""></li>
                <li><img src="img/img2.jpg" alt=""></li>
                <li><img src="img/img3.jpg" alt=""></li>
                <li><img src="img/img4.jpg" alt=""></li>
                <li><img src="img/img5.jpg" alt=""></li>
            </ul>
            <div class="arrows">
                <i class="arrow arrow-l"></i>
                <i class="arrow arrow-r"></i>
            </div>
        </div>
    </div>
</body>
</html>

下边来进入主要部分

其实主要就是动画函数的封装以及对数组的改变

动画函数部分的注释，博主的上一篇博客有写：原生JS实现动画函数的封装。这里就不重复啦~

将图片相关样式（大小、定位、透明度等）存放到arr数组里。

当用户点击左右箭头时，让数组进行相应变化（如果点击右箭头，就删除数组最后那个元素，把它添加到最前边；如果点击左箭头，就删除数组最前边那个元素，把它添加到最后边），改变完数组再调用一下move()函数（让图片轮播）

详细代码如下

window.addEventListener("load", function() {
    var arr = [
        {   // 1
            width: 450,
            top: 60,
            left: 0,
            opacity: 40,
            zIndex: 2
        },
        {   // 2
            width: 550,
            top: 30,
            left: 100,
            opacity: 70,
            zIndex: 3
        },
        {   // 3  中间图片
            width: 650,
            top: 0,
            left: 200,
            opacity: 100,
            zIndex: 4
        },
        {   // 4
            width: 550,
            top: 30,
            left: 400,
            opacity: 70,
            zIndex: 3
        },
        {   // 5
            width: 450,
            top: 60,
            left: 600,
            opacity: 40,
            zIndex: 2
        }
    ];
    var slider = document.querySelector(".slider");
    var lis = slider.querySelectorAll("li");
    var arrow_l = slider.querySelector(".arrow-l");
    var arrow_r = slider.querySelector(".arrow-r");

    // 鼠标移入移出箭头显示隐藏
    slider.addEventListener("mouseover", function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
    });
    slider.addEventListener("mouseout", function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
    });
    
    var flag = true; // flag节流阀 为了解决点击过快而产生bug
    move(); // 先调用一下，为了刚打开浏览器时渲染页面

    // 点击左右箭头轮播图片
    arrow_r.addEventListener("click", function() {
        if(flag) {
            flag = false; // 关闭节流阀 等到动画结束了才能继续执行点击操作
            arr.unshift(arr.pop());  // 将数组最后边的元素删除，添加到最前边
            move();  // 轮播图片
        }
    });
    arrow_l.addEventListener("click", function() {
        if(flag) {
            flag = false;
            arr.push(arr.shift());  // 将数组最前边的元素删除，添加到最后边
            move();
        }
    });

    // 让每个图片执行动画
    function move() {
        for(var i = 0; i < lis.length; i++) {
            animate(lis[i], arr[i], function() {
                flag = true;  // 回调函数，当动画执行完 再把节流阀打开
            });
        }
    }
    // 动画函数
    function animate(obj, json, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var bool = true;
            for(var attr in json) {
                var icur = 0;
                if(attr == 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }
                var speed = (json[attr] - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(icur != json[attr]) {
                    bool = false;
                }
                if(attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity = '+ (icur + speed) +')';
                    obj.style.opacity = (icur + speed) / 100;
                } else if(attr == 'zIndex') {
                    obj.style.zIndex = json[attr];
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
            if(bool) {
                clearInterval(obj.timer);
                callback && callback();
            }
        },15);
    }
    // 获取属性函数 
    function getStyle(obj, attr) {
        if(obj.currentStyle){   //IE浏览器
            return obj.currentStyle[attr];
        }else{    //chrome、firefox等浏览器
            return getComputedStyle(obj,null)[attr];
        }
    }
});

原文：https://www.cnblogs.com/sunyan-blog/p/12104696.html

链接: https://www.fly63.com/article/detial/7073

原生JS实现旋转木马轮播图特效

也许vue+css3做交互特效更简单

纯 CSS 创作出平滑的层叠海浪特效

js实现图片放大镜特效

基于 HTML5 Canvas 实现的文字动画特效

只需三步，实时多边形折射

纯CSS3仿网易云孤独星球特效

纯css3实现二维码扫描特效

canvas+js实现数字雨特效【字符下落特效】

纯js时钟特效

css按钮悬停特效