轮播图实现

原理

  • 使用transform:translateX(offset);实现切换
  • transition: transform 1s;实现动态效果
  • transition-duration开启或关闭动态效果。

图解

现有三张图片A、B和C
在这里插入图片描述
但为了实现C到A的无缝切换,需调整为
在这里插入图片描述
A到C的切换效果很好实现,重点在于C与A的切换:C以动画效果切换A后(索引3),停止动画效果(transition-duration:1s),视窗移入A(索引0),再开启动画效果。

代码

这是为了方便,用到了Jquery和Vue
html

<div class="container" id="container">
    <div class="carousel">
        <div class="carousel-indicator">
            
        </div>
        <div class="carousel-inner">
            <ul class="carousel-inner-group" ref="carouselInnerGroup">
                <li v-for="img in imgs2" class="carousel-item">
                    <img :src="img" alt="" ref="imgItem">
                </li>
            </ul>
        </div>
        <div class="carousel-control">
            
        </div>
    </div>
</div>

css


.carousel-inner-group{
    list-style-type: none;
    margin:0;
    padding:0;
    
    display:flex;
    width:100%;
    height:100%;
    
    transition: transform 1s;
}

.carousel-inner {
    width:100%;
    height:100%;
    overflow-x:hidden;
}

.carousel {
    width:100%;
    
}

.carousel-item >img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.carousel-item {
    flex-basis: 100%;
    flex-shrink: 0;
}

javascript

let vm=new Vue({
    el:"#container",
    data:{
        imgs:["image/la.jpg","image/ny.jpg","image/chicago.jpg"],
        active:0
    },
    computed:{
        imgs2(){
            //拷贝
            let imgs2=Object.assign([],this.imgs);

            //后面插入第一个元素
            imgs2.push(imgs2[0]);
            
            return imgs2;
        }
    },
    watch:{
        active(val){
            let vm=this;
            
            let length=this.$refs.imgItem[0].offsetWidth;
            
            if(val!=0){
                $(this.$refs.carouselInnerGroup).css("transform",`translateX(-${length*val}px)`);
            }else{//特殊情况
                //先播放动画
                $(this.$refs.carouselInnerGroup).css("transform",`translateX(-${length*this.imgs.length}px)`);  
                //播放完后,调整为初始状态
                setTimeout(function(){//延时1s,此时播放完毕
                    //先停止播放
                    $(vm.$refs.carouselInnerGroup).css("transition-duration","0s");
                    //调整到
                    $(vm.$refs.carouselInnerGroup).css("transform",'translateX(0px)');
                    //恢复
                    setTimeout(function(){//为了生效,延迟0.5s
                        $(vm.$refs.carouselInnerGroup).css("transition-duration","1s");
                    },500);
                },1000);
            }
        }
    },
    methods:{
        /**
        * active增加
        */
        incActive(){
            if(++this.active>=this.imgs.length){
                this.active=0;
            }
        }
    },
    /**
    * 设置定时器
    */
    mounted(){
        let vm=this;
        setInterval(function(){
            vm.incActive();
        },3000);
    }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值