大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

用Vue.js写一个 自适应_等比缩放_无缝切换轮播

前端入坑纪 51

周六就是分享日,来个上次vue.js轮播的小改款!

好,详解如下!

OK,first things first! github项目地址

还是很多喵
HTML 结构
    <div class="mainWrp" id="app">
        <div class="carousel">
            <ul class="imgsWrp clear" ref='imgsWrp' :style="'width:'+ lens * 100 + '%'">
                <li v-for="item in imgsArray" :style="'width:'+ 100 / lens + '%'" ref='imgs'>
                    <div class="imgsInner" :style="'background-image:url('+item+')'"></div>
                </li>
            </ul>
            <p><span ref='spanWrp'>1</span>/{{lens-1}}</p>
        </div>
    </div>

html结构中,相比之前,这次把样式都写到了对应的元素上。vue内置的ref="XX"属性,可以让我们在js中用this.$refs.XX直接获取(一个是ref,一个是refs哦)。

CSS 结构
        body,
        p,
        ul {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none
        }
        
        .mainWrp {
            width: 100%;
            max-width: 640px;
            overflow: hidden;
            margin: 0 auto
        }
        
        .clear::after {
            content: "";
            display: block;
            clear: both
        }
        
        .carousel {
            position: relative;
        }
        
        .carousel p {
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 1px 5px;
            text-align: center;
            font-size: 12px;
            color: #333;
            background-color: rgba(255, 255, 255, .6)
        }
        
        .carousel span {
            color: #666
        }
        
        .imgsWrp {
            display:flex;
            flex-flow:row nowrap;                        
        }
        
        .imgsWrp li {
            flex:1 1 auto;
        }
        
        .imgsInner {
            width: 0;
            height: 0;
            padding:30% 50%;
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center center
        }

这次轮播li里不是直接套图片img了,使用了我之前《自适应缩放图文列表》同样的原理,所有的图片都是设置div.imgsInner的背景。然后,用padding撑开div.imgsInner。ul里的li,使用的flex布局就不多赘述了,相关的文章资料好大一坨呢!

JavaScript 结构
        var vm = new Vue({
            el: "#app",
            data: {
                imgsArray: [],
                lens:0              
            },
            beforeCreate:function(){
                axios.get('imgslist.json')
                            .then(function(res) {   
                                var imgs = res.data.imgslist 
                                // 对获取的图片数组,复制第一张然后添加到它的最后面。[图1,图2,图3,......,图1]                            
                                imgs.push(imgs[0])
                                var lens =  vm.lens = imgs.length
                                vm.imgsArray=imgs
                                vm.lunbo(lens)                                                                                                                      
                            })                          
            },
            methods:{
                lunbo:function(lens){                        
                        var markSpan = this.$refs.spanWrp,
                        imgsWrp = this.$refs.imgsWrp,
                        timer = null;                        
                        i=0;

                        // 轮播每三秒要变动不同的图片
                        setInterval(function() {                            
                            i < lens - 1 ? i++ : i = 0;         
                        // 轮播的变动效果,之前是在css里,这次放到了js里,是为了后面有效的清空它                   
                            imgsWrp.style.transition="transform 700ms cubic-bezier(0.215, 0.610, 0.355, 1)"
                            imgsWrp.style.transform = "translateX(-" + 100 / lens * i + "%)";
                            markSpan.textContent = i + 1

                           // 当轮播到最后一张时,要做的处理
                            if(i+1==lens){
                                clearTimeout(timer)
                                // 将显示的数变成显示1(其实这里轮播就是播到最后一张,障眼法)
                                markSpan.textContent = 1
                               // 设置个1秒后的定时器,将动效的css清除,i置为0,然后imgsWrp的transform也变到0,也就是最开始的位置
                                timer = setTimeout(() => {
                                    imgsWrp.style.transition="none";
                                    i = 0;
                                    imgsWrp.style.transform = "translateX(0)";
                                }, 1000);                                
                            }
                        }, 3000)                   
                }
            },
            
        })

这里简述下,无缝切换的思路:因为最后一张和第一张是一样的,所以过渡效果到最后一张时,其实显示的是第一张的图片。也就是在这个时候,悄悄把下一次的切换从第二张图开始过渡。
补充说明下最关键的那个一秒的定时器:
1.为什么是1秒呢?因为动效的过渡时间为700ms,所以只要大于它,小于3秒就可以。

  1. imgsWrp.style.transition="none";的原因是要让做 imgsWrp.style.transform = "translateX(0)";操作的时候,不要产生过渡的效果。不然就被人看穿了。

好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福!

打开支付宝首页搜 625097528 领红包,领到大红包的小伙伴赶紧使用哦!
支持你我,扫一扫红包