js + css animate 实现一个轮播图

约定不等于承诺〃 2024-04-19 15:12 100阅读 0赞

# js + css animate 实现一个轮播图 #

<!DOCTYPE html>
    <html lang='en'>
    
    <head>
        <meta charset='UTF-8'>
        <meta name='referrer' content='always'>
        <meta name='author' content='qiphon'>
        <meta name='robots' content='none'>
        <meta name='keywords' content=''>
        <meta name='description' content=''>
        <meta name='renderer' content='webkit'>
        <meta name='revisit-after' content='7 days'>
        <meta http-equiv=widow-target Content=_top>
        <meta name='viewport' content='width=device-width, initial-scale=1,shdadarink-to-fit=no' viewport-fit=cover />
        <meta http-equiv='X-UA-Compatible' content='ie=edge,chrome=1'>
        <title>米多多官网</title>
        <link rel="stylesheet" href="./assets/css/mdd-index.css">
        <link rel="shortcut icon" href="./assets/images/favicon.ico" />
    </head>
    
    <body id="home">
        <div class="carousel">
            <div class="content-wraper">
                <div class="item active">
                    <div class="scan-code">
                        <p>扫码了解详情</p>
                        <img src="./assets/images/code@2x.png" alt="">
                    </div>
                    <img src="./assets/images/banner@3x.png" alt="">
                </div>
                <div class="item ">
                    <div class="scan-code">
                        <p>111</p>
                        <img src="./assets/images/code@2x.png" alt="">
                    </div>
                    <img src="./assets/images/banner@3x.png" alt="">
                </div>
                <div class="item ">
                    <div class="scan-code">
                        <p>222</p>
                        <img src="./assets/images/code@2x.png" alt="">
                    </div>
                    <img src="./assets/images/banner@3x.png" alt="">
                </div>
            </div>
        </div>
        <div class="floor" id="process">
            <div class="title"><img src="./assets/images/process-title@3x.png" alt="产品流程"></div>
            <img class="process-con" src="./assets/images/process-con@3x.png" alt="产品流程">
        </div>
        <script>
            /**
             *  carousel  created by qiphon 
             *    css3  animate
             *    js    animationend
             *  @params  wraperEl  String  外层包裹的元素（类名或ID名）
             *  @params  itemEl    String  内部的元素（每个要执行动画的元素）（类名或ID名）
             *  @params  options   Object
             *              interTimer  number  轮播执行的时间（大于零，默认 5s）
             *              interAutorun  boolean  轮播是否自动播放（默认true）
             *              moveDirection  string ( 'vertical' 纵向, 'horizontal' 横向（默认） )
             * 
             *  @return  carouselObj  object  额外手动控制轮播的js
             *             startInter  Function  开启轮播图定时器
             *             removeInter Function  删除轮播定时器
             *             run         Function(key [, index])  控制轮播的函数
             *                           key  number  轮播的方向 （ -1： 正向， 1：反向 ），默认情况下自动轮播下一个
             *                           index  number  下一个要出现的banner ，值是下一个banner的index（从 0 开始）
            */
            function carouselFun(wraperEl, itemEl, options = {}) {
                var interTimer = options.interTimer || 5;
                var interAutorun = typeof options.interAutorun === 'boolean' ? options.interAutorun : true 
                var moveDirection = options.moveDirection === 'vertical' ? 'vertical' : 'horizontal'
                var wraper = document.querySelector(wraperEl);
                var itemEls = document.querySelectorAll(devideClass(wraperEl, itemEl))
                var itemLen = itemEls.length
                var inter = null;
                var timeout = null;
                if(itemLen<=1)return ;
                var carouselObj = {
                    startInter,
                    removeInter,
                    run: menualRun
                }
                // 当前的展示项
                var nowIndex = 0;
                function startInter() {
                    clearInterval(inter)
                    inter = setInterval(function () {
                        run(1)
                    }, interTimer * 1000)
                    return carouselObj
                }
                function removeInter(){
                    clearInterval(inter)
                    inter = null;
                    return carouselObj
                }
                interAutorun && interTimer && startInter();
                function devideClass() {
                    return Array.prototype.join.call(arguments, ' ')
                }
                function removeClass(node, classStr) {
                    var str = ''
                    classStr = classStr.split(' ')
                    node.className.split(' ').forEach(function (item,i) {
                        classStr.indexOf(item) < 0 && i === 0 && (str = item);
                        classStr.indexOf(item) < 0 && i !== 0 && (str += ' ' + item);
                    });
                    node.className = str
                }
                function addClass(node, classStr) {
                    var cls = node.className.split(' ')
                    var classStr = classStr.split(' ')
                    classStr.forEach(function (item) {
                        cls.indexOf(item) < 0 && (node.className += ' ' + item)
                    })
                }
                // 移动的函数
                function move(key, beforeIndex, nowIndex) {
                    itemEls[beforeIndex].addEventListener('animationend', animationendFun);
                    var obj = {
                        'horizontal': function(){
                            switch (key) {
                                case 1:
                                    addClass(itemEls[beforeIndex], 'carousel-h-left')
                                    addClass(itemEls[nowIndex], 'carousel-next carousel-h-left')
                                    break;
                                case -1:
                                    addClass(itemEls[beforeIndex], 'carousel-h-right')
                                    addClass(itemEls[nowIndex], 'carousel-prev carousel-h-right')
                                    break;
                            }
                        },
                        'vertical':function(){
                            switch (key) {
                                case 1:
                                    addClass(itemEls[beforeIndex], 'carousel-v-top')
                                    addClass(itemEls[nowIndex], 'carousel-next carousel-v-top')
                                    break;
                                case -1:
                                    addClass(itemEls[beforeIndex], 'carousel-v-bottom')
                                    addClass(itemEls[nowIndex], 'carousel-prev carousel-v-bottom')
                                    break;
                            }
                        }
                    }
                    obj[moveDirection]();
                }
                // 移动结束，清除类名
                function animationendFun() {
                    removeClass(this, 'active carousel-h-left carousel-h-right carousel-v-bottom carousel-v-top')
                    removeClass(itemEls[nowIndex], 'carousel-next carousel-h-left carousel-h-right carousel-prev carousel-v-top carousel-v-bottom')
                    addClass(itemEls[nowIndex], 'active')
                    run.moveLock = false;
                }
                /**
                 *  轮播执行函数, 计算出当前的元素和下一个元素index和要移动的方向
                 *  @params  key  Number  移动的方向
                 *               -1  向左移动
                 *                1   向右移动
                 *  @params  index number  下一个将要显示的索引
                 *    当index 存在时，key可以为null、undefined，这时会自动生成一个key，
                 *    当然也可以手动指定一个key，规定移动的方向
                */
                function run(key, index) {
                    // 当前展示的 item
                    var beforeIndex = nowIndex;
                    if (run.moveLock) return carouselObj;
                    run.moveLock = true;
                    if (index) {
                        if (index === beforeIndex) return carouselObj;
                        (itemLen > index && index >= 0 && !key) && (key = index > beforeIndex ? 1 : -1)
                    }
    
                    switch (key) {
                        case 1:
                            // 将要展示的 item
                            nowIndex = index ? index : (beforeIndex + key) >= itemLen ? 0 : beforeIndex + key
                            move(1, beforeIndex, nowIndex)
                            break;
                        case -1:
                            nowIndex = index ? index : (beforeIndex + key) < 0 ? itemLen - 1 : beforeIndex + key
                            move(-1, beforeIndex, nowIndex)
                            break;
                        default:  // 初始化
                            if (itemArr.length <= 1) {
                                stopCarousel(inter);
                            }
                    }
                    return carouselObj
                }
                run.prototype.moveLock = false;
                // 手动控制轮播图运动
                function menualRun(key, index){
                    clearInterval(inter)
                    clearTimeout(timeout)
                    run(key, index)
                    interAutorun && (timeout = setTimeout(function(){
                        startInter()
                    },interTimer*1000));
                }
                window.addEventListener('visibilitychange',function(){
                    var isHidden = document.hidden
                    var visible = document.visibilityState
                    isHidden && removeInter()
                    !isHidden && startInter()
                })
                return carouselObj;
            }
            // 一下是使用方法===============================
    
            var carousel = carouselFun('.content-wraper', '.item', {
                moveDirection: 'vertical',
                interAutorun: false
            })
            document.querySelector('body').onclick = function () {
                carousel.run(-1)
            }
            
            document.querySelector('.carousel').onmouseover = function(){
                console.log('over')
                carousel.removeInter()
            }
            document.querySelector('.carousel').onmouseout = function(){
                console.log('out')
                carousel.startInter()
            }
        </script>
    </body>
    
    </html>```