vue实现旋转木马（图片数量无限制）

最新推荐文章于 2024-08-18 10:49:07 发布
最新推荐文章于 2024-08-18 10:49:07 发布
阅读量1.6k 收藏 5
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34568700/article/details/106138510
版权

图片数量可为任意值都能正常处理 [1-无限个]：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        html,body{
            font-size: 100px;
        }
        html,body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .film-box{
            width:100%;
            height: 100%;
        }
        ul{
            position: relative;
            width: 100%;
            list-style: none;
        }
        ul li {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width:0rem;
            height: 0rem;
            text-align: center;
        }
        ul li.film-show{
            transition: all 1s;
            width: 87rem;
            height: 50rem;
        }
        ul li img {
            /* width: 100%; */
            height: 100%;
        }

        /* 左右箭头 */
        .arrow {
            position: absolute;
            width: 100%;
            top: 50%;
            /* opacity: 0; */
            z-index: 3;
        }
        .prev,.next {
            position: absolute;
            height: 5rem;
            width: 3rem;
            border-radius: 50%;
            top: 50%;
            margin-top: -56px;
            overflow: hidden;
            text-decoration: none;
        }
        .prev{
            left: 0;
            background: url("./imgs/arrow-left.png") no-repeat left top;
            background-size: 100% 100%;
        }
        .next{
            right: 0;
            background: url("./imgs/arrow-right.png") no-repeat right top;
            background-size: 100% 100%;
        }

        .filmindex{
            color: #cb2e2e;
            font-size: 2.4rem;
            position: absolute;
            bottom: 12rem;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="film-box" id='app'>
        <ul id="slide">
            <li v-for='(item,index) in films' 
                :key='index'
                v-bind:class="item.show ? 'film-show' : ''"
                v-bind:style="{left:filmsHideLeft}" 
                v-bind:data-index = 'index' >
                 <img v-bind:src="item.image"  alt="">
            </li>
        </ul>
        <span class="filmindex">{{ filmCurrIndex + 1 + '/' + films.length}}</span>
        <div class="arrow" id="arrow">
            <a href="javascript:;" id="arrPrev" class="prev" @click='last'></a>
            <a href="javascript:;" id="arrNext" class="next" @click='next'></a>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            films:[],
            filmsHideLeft:'0rem',//控制隐藏图片是从左上角跳出来还是从右上角跳出来
            configStart:0,
            filmCurrIndex:2,
            config:[
                {
                    "transform":"scale(0.6)",
                    "top": '5rem',
                    "left": '-13rem',
                    "zIndex": 2,
                    "backgroundColor":"#98E0AD"
                },      //0
                {
                    "transform":"scale(0.8)",
                    "top": '3rem',
                    "left": '13rem',
                    "zIndex": 3,
                    "backgroundColor":"#BAD1F0"
                },     //1
                {
                    "transform":"scale(1)",
                    "top": '2rem',
                    "left": '45rem',
                    "zIndex": 4,
                    "backgroundColor":"#F3DFDE"
                },     //2
                {
                    "transform":"scale(0.8)",
                    "top": '3rem',
                    "left": '93rem',
                    "zIndex": 3,
                    "backgroundColor":"#BAD1F0"
                },    //3
                {
                    "transform":"scale(0.6)",
                    "top": '5rem',
                    "left":'113rem',
                    "zIndex": 2,
                    "backgroundColor":"#98E0AD"
                },    //4
            ],
         	lessNum:0,
        },
        methods:{
        	next(){
                if (this.lessNum < 5) {
                    this.nextFilmLessFive();
                } else {
                    this.nextFilm();
                }
            },
            last(){
                if (this.lessNum < 5) {
                    this.lastFilmLessFive();
                } else {
                    this.lastFilm();
                }
            },
            nextFilm(){
                let self = this;
                this.filmsHideLeft = '185rem';
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                // 最后一个位于正中央时按下一个不再反应
                console.log(currShowFirst,self.films.length)
                if (currShowFirst + 3 == self.films.length){
                    return;
                }
                // 改变DOM的显示与隐藏
                if (self.configStart == 0) {
                    self.films[currShowFirst].show = false; 
                    if (currShowFirst + 5 <= this.films.length - 1){// 正中央显示的是倒数第二张或倒数第一张时，按下一个不需要设置哪张显示成true
                        self.films[currShowFirst + 5].show = true;
                    }
                }else if (self.configStart == 1) {
                    self.films[4].show = true;
                    self.configStart = 0;
                } else if(self.configStart == 2){
                    self.films[3].show = true;
                    self.configStart = 1;
                }
                
                console.log(self.films)
                self.$nextTick(function(){
                    // 改变DOM的left,top,scale,zIndex,backgroundColor
                    this.filmCurrIndex = (this.filmCurrIndex + 1 >= this.films.length - 1 ? this.films.length - 1 : this.filmCurrIndex + 1);
                    self.assign();
                })
            },
            lastFilm(){
                let self = this;
                this.filmsHideLeft = '0rem';
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                if (currShowFirst !== 0) { 
                    self.films[currShowFirst -1].show = true;
                    if (currShowFirst + 4 <= this.films.length -1) {// 正中央显示的是倒数第二张或倒数第一张时，按上一个不需要设置哪张显示成false
                        self.films[currShowFirst + 4].show = false;
                    }
                } else {
                    if (self.configStart == 0) {
                        self.configStart = 1;
                        self.films[4].show = false;
                    } else if (self.configStart == 1) {
                        self.configStart = 2;
                        self.films[3].show = false;
                    } else {
                        // 第一个位于正中央时按上一个不再反应
                        return;
                    }
                }
                console.log(self.films)
                self.$nextTick(function(){
                    this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
                    self.assign();
                })
            },
           lastFilmLessFive(){
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                if (this.lessNum === 4) {
                    if (!this.films[0].show) {
                        this.films[0].show = true;
                    } else {
                        if (this.configStart === 2) return;
                        if (this.configStart === 0) {
                            this.configStart = 1;
                        } else if (this.configStart === 1) {
                            this.configStart = 2;
                            this.films[3].show = false
                        }  
                    }                           
                } else if (this.lessNum === 3) {
                    if (this.configStart === 1) {
                        this.configStart = 2;
                    } else if (this.configStart === 0) {
                        this.configStart = 1;
                    }
                } else if (this.lessNum === 2) {
                    if (this.configStart === 1) {
                        this.configStart = 2;
                    } 
                }
                this.$nextTick(function(){
                    this.filmCurrIndex = (this.filmCurrIndex - 1) < 0 ? 0 : (this.filmCurrIndex - 1);
                    this.assign();
                })
            },
           nextFilmLessFive(){
                let currShowFirst = parseInt(document.querySelectorAll('.film-show')[0].dataset.index);
                if (this.lessNum === 4) {
                    if (!this.films[0].show) return;
                    if (this.configStart === 2) {
                        this.configStart = 1;
                        this.films[3].show = true;
                    } else if (this.configStart === 1) {
                        this.configStart = 0;
                    } else {
                        this.films[0].show = false;
                    }           
                } else if (this.lessNum === 3) {
                    if (this.configStart === 1) {
                        this.configStart = 0;
                    } else if (this.configStart === 2) {
                        this.configStart = 1;
                    }
                } else if (this.lessNum === 2) {
                    if (this.configStart === 2) {
                        this.configStart = 1;
                    } 
                }
                this.$nextTick(function(){
                    console.log(this.filmCurrIndex,this.films.length)
                    this.filmCurrIndex = (this.filmCurrIndex + 1 >= this.films.length - 1 ? this.films.length - 1 : this.filmCurrIndex + 1);
                    this.assign();
                })
            },
            assign() { 
                let self = this;
                var list= document.getElementById("slide").getElementsByClassName("film-show"); //拿到所有li
                for (var i = 0; i < list.length; i++){
                    let json = self.config[i + this.configStart];
                    for (var attr in json) {
                        list[i].style[attr] = json[attr];
                    }
                }
            }
        },
        mounted(){
            this.films = this.films.concat([
               {image:'./imgs/9.jpeg',show:true},
                {image:'./imgs/1.jpg',show:true},
                {image:'./imgs/2.jpg',show:true},
                {image:'./imgs/3.jpg',show:true},
                {image:'./imgs/4.jpg',show:true},
                // {image:'./imgs/5.jpg',show:false},
                // {image:'./imgs/6.jpg',show:false},
                // {image:'./imgs/7.jpg',show:false},
                // {image:'./imgs/8.jpg',show:false},
            ]);
            this.$nextTick(function(){
            	this.lessNum = this.films.length;
                if (this.lessNum === 3) {
                    this.configStart = 1;
                    this.filmCurrIndex = 1;
                }
                if (this.lessNum === 2) {
                    this.configStart = 2;
                    this.filmCurrIndex = 0;
                }
                if (this.lessNum === 1) {
                    this.configStart = 2;
                    this.filmCurrIndex = 0;
                }
                this.assign();
            })
            
        },
        created(){
            let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
            let rootDom = document.querySelector('html');
            rootDom.style.fontSize = rootWidth / 1920 * 10 + 'px';
        }
    });

	 // 功能增强(以上部分已经实现了旋转木马)：
	 // 以下代码实现目标：鼠标模拟移动端的左滑右滑事件，在左滑右滑中可以切换图片
    (function(){
        var touchDot,flagLeft = true,flagRight = true; 
        var bodyDom = document.querySelector('body');
        bodyDom.addEventListener('mousedown',down,false);
        bodyDom.addEventListener('mousemove',move,false);
        bodyDom.addEventListener('mouseup',up,false);
        bodyDom.addEventListener('mouseout',up,false);
        function down(event){
            touchDot = event.clientX; // 获取触摸时的原点 
        }
        function move(event){
            if (touchDot !== undefined) {
                var touchMove = event.clientX;
                // 向左滑动  
                if (touchMove - touchDot <= -40) {
                    if (flagLeft) {
                        vm.nextFilm();
                        flagLeft = false;// 鼠标未抬起之前持续左滑最多只能左滑一张图片
                        flagRight = true;// 鼠标左滑切换图片后，鼠标未抬起之前可以通过再右滑切换回到之前的图片
                    } else {
                        touchDot = touchMove;
                    }
                }
                // 向右滑动 
                if (touchMove - touchDot >= 40) {
                    if (flagRight) {
                        vm.lastFilm();
                        flagRight = false; // 鼠标未抬起之前持续右滑最多只能右滑一张图片
                        flagLeft = true;// 鼠标右滑切换图片后，鼠标未抬起之前可以通过再左滑切换回到之前的图片
                    } else {
                        touchDot = touchMove;
                    }
                }
            }
        }
        function up(event){
            // 鼠标抬起重置一切可以进行下一步操作;
            flagRight = true;
            flagLeft = true;
            touchDot = undefined;
        }
    }())
</script>
</html>
废柴小z
关注
专栏目录
Vue 过渡实现轮播图效果
08-31
本篇文章主要介绍了Vue 过渡实现轮播图效果，Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。
前端学习（231）:box-reflect倒影
歌谣的博客
12-27 286
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
vue3旋转木马型轮播图，环型滚动
最新发布
irisMoon06的博客
08-18 465
【代码】vue3旋转木马型轮播图，环型滚动。
vue旋转木马效果
Mr_Shil的博客
07-19 2680
vue实现旋转木马效果，是网上的代码改成了vue可用的 全部代码 <template> <div id="drag-container"> <div id="spin-container"> <div class="img-con"> <img ref="img" src="../../assets/images/lb/rongyu.png" alt="" /> </div&gt.
vue 纯CSS 旋转木马
henghahouhei的博客
05-16 759
vue 纯CSS 旋转木马； 贝塞尔曲线； 纯css绕中间旋转
在vue脚手架中，学习实现一个轮播图（2-旋转木马）
@zhujj_的博客
08-24 2876
在vue脚手架环境中，学习实现一个轮播图（旋转木马样的）
Vue组件旋转木马动画效果
weixin_43845662的博客
06-02 3382
Vue组件旋转木马动画效果 源码如下 <template> <div id="wrapper"> <transition-group name="list" tag="ul" mode="out-in"> <li v-for="(item,index) in piclist" :key="item.url" :style="conf...
vue3.0 实现旋转木马
zhazhali_fenqi的博客
05-06 2333
做的比较丑 最后图片 本来打算用vue-carousel-3d这个组件的，但是这个组件一直报源码错误，修改了半天也没有解决 使用了swiper组件 html部分代码 <div class="swiper-container swiper1" style="height: 650px;width: 1500px"> <div class="swiper-wrapper"> <div class="swiper-slide">
Vue帆布旋转木马Vuc-Carouselvue帆布旋转木马-Vue旋转木马的Vue画布组件-Vue.js开发
05-27
vuc $$链接演示:eye:中文文档:eye:安装npm install-保存vuc-input || vuc-carousel || .....纱线添加vuc-input || vuc-carousel || ......基本用法// v vuc $$链接演示:eye:中文文档:eye:安装npm install --save vuc-input || vuc-carousel || .....纱线添加vuc-input || vuc-carousel || ......基本用法// vuc-input包//从'vuc-input'全局导入vucInput Vue.use（vucInput）//从'vuc-input'本地导入{vucInput}导出默认{组件：{ vuc-input}}组件包预览vuc-color:eye:vuc-picture-contrast:eye:vuc-scratch:eye:vuc-identify:eyes:vuc-input:eyes:vuc-carousel
vue实现图片3D旋转效果
weixin_70032683的博客
10-10 2703
vue实现图片3D旋转效果(点击一次停止，再次点击继续，双击图片放大，再次双击大图消失)
vue:旋转木马轮播组件
05-13
Vue-runrowdswiper 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
vue-slick-carousel：:horizontal_traffic_light:真正的SSR的Vue Slick旋转木马，专为:high_voltage:FluxLuxstay
02-05
Vue光滑轮播 :horizontal_traffic_light: 具有真正SSR的Vue Slick传送带为更快的。 这是的端口。 :artist_palette: 产品特点 简单 中心模式 多 行数 可变宽度 垂直 延迟加载 同步滑块 vue-slick-carousel继承了广受欢迎的slick-carousel功能，提供了多种功能。 它已被完全重写为vue组件。 如果您试图在Vue中使用圆滑传送带，那将是一个完美的选择。 您可以以vue组件的方式使用它，而不会出现任何差异。 它还可以轻松解决难题，例如自定义箭头/点。 查找有关所有可用功能，并查看其在。 真正的SSR FCP：1920毫秒＆LCP：3090毫秒 FCP：620ms＆LCP：1850ms
一个不错的旋转木马轮播图特效.zip
04-25
旋转木马轮播图特效共有五张图片，每张图片排列的位置是以中间为对称的。实现了想要的轮播效果，可用在网页制作中重要的展示。
纯js超酷3D旋转木马特效插件
07-05
纯js超酷3D旋转木马特效插件
【JavaScript源代码】vue实现旋转木马动画.docx
12-29
vue实现旋转木马动画 　　本文实例为大家分享了vue实现旋转木马动画的具体代码，供大家参考，具体内容如下　　图片数量可为任意值都能正常处理 [1-无限个]：　　<!DOCTYPE html>　　<html>　　<head>　　    <title></title>　　    <meta charset="UTF-8">　　    <meta http-equiv="Access-Control-Allow-Origin" content="*">　　    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
vue+css3 旋转木马效果
leng0920的博客
03-09 1786
${ASSET_HOST}为封装的统一的图片路径 <template> <!-- :style="{backgroundImage: 'url(' + `${ASSET_HOST}/main_bg.jpg` + ')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}" --> <div class="index"> <div class="index-bg" :style=.
13 使用Vue + FormData + axios实现图片上传功能实战
热门推荐
xingyu_qie的专栏
06-21 1万+
文本通过Vue实例项目，使用axios + FormData实现图片上传做为例子，为下一节图书信息上传做准备
vue 3D旋转木马轮播图
weixin_42835782的博客
11-25 5437
利用carousel-3d插件。 安装 npm install -S vue-carousel-3d 全局引入 import Vue from 'vue' import Carousel3d from 'vue-carousel-3d' Vue.use(Carousel3d） 局部引入 import { Carousel3d, Slide } from "vue-carousel-3d"; export default { components: { Carousel3d, Sli
Vue实现旋转木马动画：动态展示图片
该文档是关于使用Vue.js实现旋转木马动画的实例代码，支持任意数量的图片，并提供了相应的HTML、CSS和JavaScript代码。 在Web开发中，旋转木马（Carousel）是一种常见的交互式组件，通常用于展示多张轮播图片。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值