vue3 js+css实现旋转木马式轮播

vue3 js+css实现旋转木马式轮播

具体代码如下，图片替换成本地的图片路径即可

<template>
    <div class="pages">
        <div id="imgContainer">
            <img :src="item.img"  v-for="(item,index) in imgList" :key="index" alt="">
        </div>
    </div>
</template>

<script>
    import {
      
      nextTick, onMounted, reactive, toRefs} from 'vue'
    export default {
      
      
        name: "sfcs",
        setup(){
      
      
            const data = reactive ({
      
      
                time:null,
                imgList:[
                    {
      
      
                        img:require('../../../../assets/images/sfcs/blljjc.png'),
                    },
                    {
      
      
                        img:require('../../../../assets/images/sfcs/dwjyjc.png'),
                    },
                    {
      
      
                        img:require('../../../../assets/images/sfcs/fjdcltjc.png'),
                    },
                    {
      
      
                        img:require('../../../../assets/images/sfcs/jdcltjc.png'),
                    },
                    {
      
      
                        img:require('../../../../assets/images/sfcs/zdjyjc.png'),
                    }
                ],
                pn:null,
                imgArr:[],
                w:190,  //每个元素的宽度
                h:140,  //每个元素的高度
                y:40,   //距离顶部的距离
                x:200,   // 距离左边的距离
                r:190,  // 旋转半径
                dv:0.01, //旋转速度
                rh:10,  // 前面和后面的元素高度差
            })
            onMounted(() => {
      
      
                nextTick(() => {
      
      
                    data.time = imgRound("imgContainer",data.w,data.h,data.x,data.y,data.r,data.dv);
                    setInterval(()=>{
      
      roundMove()},20)
                })
            })
            const imgRound = (id,w,h,x,y,r,dv,rh,ah)=>{
      
      
                if (ah==undefined) ah=1;
                // if (rh==undefined) rh=10;
                var dv=dv*ah; //旋转速度
                data.pi=3.1415926575;
                data.d=data.pi/2;
                data.pd=Math.asin(w/2/r);
                data.smove=true;
                data.imgArr=new Array();
                var objectId=id;
                var o=document.getElementById(objectId);
                o.style.position="relative";
                var arrimg=o.getElementsByTagName("img");
                data.pn=arrimg.length; //图片数量
                data.ed=data.pi*2/data.pn;
                for (let n=0;n<arrimg.length;n++){
      
      
                    var lk=arrimg[n].getAttribute("link");
                    if (lk!=null) arrimg[n].setAttribute("title",lk)
                    arrimg[n].onclick=function(){
      
      
                        if (this.getAttribute("link")!=null){
      
      
                            if (this.getAttribute("target")!="_blank") window.location=(this.getAttribute("link"))
                            else window.open(this.getAttribute("link"))
                        }
                    }
                    arrimg[n].onmouseout=function(){
      
      data.smove=true;}
                    arrimg[n].onmouseover=function(){
      
      data.smove=false;}
                    arrimg[n].style.position="absolute";
                    data.imgArr.push(arrimg[n]);
                }
                roundMove()
            }
            const roundMove = () => {
      
      
                // let r = 190       // 旋转半径
                // let x = 200     // 距离左边的距离
                let rh = 10     // 前面和后面的元素高度差
                // let y = 40     //距离顶部的距离
                // let h = 140    //每个元素的高度
                // let dv = 0.01   //旋转速度
                for (let n=0;n<=data.pn-1;n++){
      
      
                    var o=data.imgArr[n];
                    var ta=Math.sin(data.d+data.ed*n),strFilter;
                    if (ta<0) o.style.left=Math.cos(data.d+data.ed*n-data.pd)*data.r+data.x+30+"px";
                    else o.style.left=Math.cos(data.d+data.ed*n+data.pd)*data.r+data.x+30+"px";
                    o.style.top=ta*data.rh+data.rh+data.y+"px";
                    var zoom=Math.abs(Math.sin((data.d+data.ed*n)/2+data.pi/4))*0.5+0.5;
                    o.style.width=Math.abs(Math.cos(data.d+data.ed*n+data.pd)-Math.cos(data.d+data.ed*n-data.pd))*zoom*data.r+"px";
                    o.style.height=zoom*data.h+"px";
                    if (ta<0) {
      
      ta=(ta+1)*80+20;o.style.zIndex=0;}
                    else {
      
      ta=100;o.style.zIndex=1}
                    if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"
                    else strFilter="FlipH(enabled:false)";
                    strFilter=strFilter+" alpha(opacity="+ta+")";
                    o.style.opacity=ta/100;
                    o.style.filter=strFilter;
                }
                if (data.smove) data.d=data.d+data.dv;
            }
            return {
      
      
                ...toRefs(data),
                imgRound,
                roundMove,
            }
        }
    }
</script>

<style lang="less" scoped>
.pages{
      
      
    width: 100%;
    height: 100%;
    perspective: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.img{
      
      
    position: absolute;
}
    #imgContainer{
      
      
        width:100%;height:200px;margin-top: -30px;
    }
    .bot-bg{
      
      
        display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top:140px;
    }
</style>