<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            width: 1200px;
            height: 500px;
            border: 1px solid red;
            margin: 50px auto;
        }

        .swiper {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .item {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            overflow: hidden;
        }

        .active {
            z-index: 2
        }

        .animating {
            transition: transform .4s ease-in-out;
        }

        .item:nth-child(1) {
            background: pink;
        }

        .item:nth-child(2) {
            background: green;
        }

        .item:nth-child(3) {
            background: blue;
        }

        .item:nth-child(4) {
            background: red;
        }

        .item:nth-child(5) {
            background: orange;
        }

        .text {
            font-size: 50px;
            text-align: center;
            color: #fff;
            line-height: 500px;
        }

        .button {
            width: 50px;
            height: 100px;
            background: #fff;
            opacity: .6;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
        }

        .left {
            left: 20px;
        }

        .right {
            right: 20px;
        }

        .indicators {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            list-style: none;
            margin: 0;
            padding: 0;
            height: 27px;
        }

        .labels {
            width: 30px;
            height: 3px;
            display: inline-block;
            padding: 12px 4px;
            list-style: none;
            margin: 0;
            opacity: 0.5;
        }

        .labels-active {
            opacity: 1;
        }

        .labels > span {
            display: block;
            width: 100%;
            height: 100%;
            background: #fff;
        }
    </style>
</head>
<body>
<div id="app"></div>
<script src="./vue.global.js"></script>
<script>
    // Composition API
    const {reactive, onMounted, effect, createApp, onRenderTriggered, computed, watch, onBeforeMount, createComponent} = Vue;

    const Item = createComponent({
        template: `<div class="item text"
                        :class="{
                        'active':data.active,
                        'animating': data.animating
                        }"
                        :style="itemStyle()">
                       <slot></slot>
                   </div>`,
        setup(props) {
            let width = 0;
            const data = reactive({
                translate: 0,
                active: false,
                animating: false
            });
            onMounted(() => {
                width = document.querySelector('.item').offsetWidth;
                translateItem(props.index, props.active, props.length, props.oldIndex);
            });
            const itemStyle = () => {
                const value = `translateX(${data.translate}px)`;
                return {
                    transform: value
                }
            };
            const calcTranslate = (index, active) => {
                return width * (index - active);
            };
            const processIndex = (index, active, length) => {
                if (active === 0 && index === length - 1) {
                    return -1;
                } else if (active === length - 1 && index === 0) {
                    return length;
                } else if (index < active - 1 && active - index >= length / 2) {
                    return length + 1;
                } else if (index > active + 1 && index - active >= length / 2) {
                    return -2;
                }
                return index;
            };
            const translateItem = (index, active, length, oldIndex) => {
                if (width === 0) {
                    return;
                }
                if (oldIndex !== undefined) {
                    data.animating = index === active || index === oldIndex;
                }
                if (index !== active && length > 2) {
                    index = processIndex(index, active, length);
                }
                data.active = index === active;
                data.translate = calcTranslate(index, active);
            };
            effect(() => {
                translateItem(props.index, props.active, props.length, props.oldIndex);
            });
            return {
                data,
                itemStyle
            }
        }
    });

    const App = {
        template: `<div class="swiper"
                        @mouseenter.stop="removeActive()"
                        @mouseleave.stop="changeActive()">
                       <Item v-for="($item, $index) in data.list"
                             :key="$index"
                             :index="$index"
                             :oldIndex="data.oldIndex"
                             :length="data.list.length"
                             :active="data.index">
                           {{$index + 1}}
                       </Item>
                       <div class="button left"
                            @click="activeLeft()">
                       </div>
                       <div class="button right"
                            @click="activeRight()">
                       </div>
                       <ul class="indicators">
                           <li class="labels"
                               :class="{'labels-active':data.index === $index}"
                               v-for="($item, $index) in data.list"
                               @mouseenter="changeLabelsActive($index)">
                               <span></span>
                           </li>
                       </ul>
                   </div>`,
        components: {Item},
        setup() {
            const data = reactive({
                list: [1, 2, 3, 4, 5],
                index: 0,
                oldIndex: undefined,
                time: 3000
            });
            watch(() => data.index, (val, oldVal) => {
                data.oldIndex = oldVal;
            });
            let time = null;
            const _initTimer = (time) => {
                return setInterval(() => {
                    if (data.index < data.list.length - 1) {
                        data.index++;
                    } else {
                        data.index = 0;
                    }
                }, time);
            };
            onMounted(() => {
                time = _initTimer(data.time);
            });
            const changeActive = () => {
                clearInterval(time);
                time = _initTimer(data.time);
            };
            const removeActive = () => {
                clearInterval(time);
            };
            // 节流函数
            // 立即执行 在单位时间内只触发一次事件
            const throttle = (method, delay) => {
                let timer = null;
                let start = false;
                return function () {
                    if (!start) {
                        start = true;
                        method.apply(this, arguments);
                        timer = setTimeout(() => {
                            start = false;
                        }, delay);
                    }
                };
            };
            // 防抖函数
            // 延迟执行 在事件被触发单位时间内 又被触发 则重新计时
            const debounce = (method, delay) => {
                let timer = null;
                let start = null;
                return function () {
                    let now = Date.now();
                    if (!start) {
                        start = now;
                    }
                    if (now - start > delay) {
                        method.apply(this, arguments);
                        start = now;
                    } else {
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            method.apply(this, arguments);
                        }, delay);
                        start = now;
                    }
                };
            };
            const activeLeft = throttle(() => {
                if (data.index > 0) {
                    data.index--;
                } else {
                    data.index = data.list.length - 1;
                }
            }, 400);
            const activeRight = throttle(() => {
                if (data.index < data.list.length - 1) {
                    data.index++;
                } else {
                    data.index = 0;
                }
            }, 400);
            const changeLabelsActive = debounce((index) => {
                data.index = index;
            }, 400);
            return {
                data,
                changeActive,
                removeActive,
                activeLeft,
                activeRight,
                changeLabelsActive
            }
        }
    };
    // 挂载
    let app = document.getElementById('app');
    createApp().mount(App, app);
</script>
</body>
</html>

　　

　　基于Vue3.0的CSS3动画轮播

vue手写轮播的更多相关文章

  1. 偏前端-纯css,手写轮播-（焦点切换 和 自动轮播 只可选择一种，两者不可共存）

    现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧 不多说:效果图看一下: 高度不能是固定 ...

  2. 简单的 js手写轮播图

    html: <div class="na1">   <div class="pp">    <div class="na ...

  3. vue-awesome-swipe 基于vue使用的轮播组件 使用(改)

    npm install vue-awesome-swiper --save  //基于vue使用的轮播组件 <template> <swiper :options="swi ...

  4. SpringCloud-Ribbon负载均衡机制、手写轮询算法

    Ribbon 内置的负载均衡规则 在 com.netflix.loadbalancer 包下有一个接口 IRule,它可以根据特定的算法从服务列表中选取一个要访问的服务,默认使用的是「轮询机制」 Ro ...

  5. vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...

  6. vue.js层叠轮播

    最近写公司项目有涉及到轮播banner,一般的ui框架无法满足产品需求:所以自己写了一个层叠式轮播组件:现在分享给大家: 主要技术栈是vue.js ;javascript;jquery:确定实现思路因 ...

  7. mpvue微信小程序怎么写轮播图，和官方微信代码的差别

    目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作. 那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了: 官方代码: <swiper indicat ...

  8. 原生Js写轮播图代码

    html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...

  9. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

随机推荐

  1. C# ListView添加DragDrop

    先建立好ListView,ImageList,然后编写一个比较类在就是添加DragDrop事件了具体实现看代码吧 public partial class Form1 : Form { public  ...

  2. 命令行运行python -m http.server报错

    最近在学习网站搭建,借助python搭建服务器时,在网站目录启动python服务时报错,如下: UnicodeDecodeError: 'utf-8' codec can't decode byte ...

  3. python 中PIL.Image和OpenCV图像格式相互转换

    PIL.Image转换成OpenCV格式: import cv2 from PIL import Image import numpy   image = Image.open("plane ...

  4. Rsync+sersync部署

    内核版本:2.6.32-431.el6.x86_64 系统采用最小化安装,系统经过了基本优化,selinux 为关闭状态,iptables 为无限制模式 源码包存放位置:/root Rsync 客户端 ...

  5. EwoMail 邮件服务器安装

    ewomail 安装及使用 主页:http://www.ewomail.com/ 开源版主页:http://www.ewomail.com/list-9.html 开源版文档:http://doc.e ...

  6. 发布程序包到Nuget

    今天想着别人都把自己做的程序包发布到nuget上去开放给别人使用,那么我是否也能这么干呢,于是就研究了一番,发现还真可以,而且非常简单,接下来就介绍下发布自己的程序包到nuget上的方法. 一.创建公 ...

  7. CondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://mirrors.ustc.edu.cn/anaconda/pkg

    conda安装时一直报错,换源什么的都不好使,折腾了半天,直到看到https://blog.csdn.net/u013383596/article/details/87718472 将https改为h ...

  8. 前端自动化gulp使用方法

    gulp介绍 1. 网站: http://slides.com/contra/gulp#/ 2. 特点 易于使用:通过代码优于配置的策略, Gulp 让简单的任务简单,复杂的任务可管理. 构建快速 : ...

  9. Python---基础---dict和set2

    2019-05-21 写一个程序来管理用户登陆系统的用户信息:登陆名字和密码,登陆用户账号建立后,已存在用户可以用登陆名字和密码重返系统,新用户不能用别人的用户名建立用户账号 ------------ ...

  10. Test 6.29 T1 预算方案

    问题描述 "我需要你为我制订一个购物的方案.我将要为我的宫殿增置一些家具.有n 种备选家具,家具有主件和附件之分.在购买某个主件的附件之前,我必须先购买其对应的主件.某一主件的附件不会是另一 ...