vue实现轮播图效果

小明同学`

已于 2023-05-20 19:34:35 修改

阅读量5.5k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端 html

于 2023-05-16 09:06:28 首次发布

本文链接：https://blog.csdn.net/m0_63229717/article/details/130676540

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1,实现轮左右按键轮播效果，采用数组下标指定轮播图片，定义一个dindex与index下标相比较。

2，创建轮播的图片的数组

3，实现下方圆点点击轮播图片，采用动态绑定和数组的动态样式实现未点击的白色和点击的黑色

dindex与index相比较两值相不一致就是白色反之为黑色

4，实现图片定时轮播，创建定时器，将方法放入mounted生命周期中使其定时轮播，点击按钮轮播时清除定时器

5，实现鼠标移入移出左右切换图片按钮的样式切换，使用css3中的：hover的样式

一，body， HTML代码

<body>
    <div id="box">
            <button id="left" @click="left">//左侧点击按钮
                        <
            </button>
                <img id="img":src="img[dindex]" >//轮播的图片采用动态绑定渲染
            <button id="right" @click="right">
                        >
            </button>
            <ul>
                //采用v-for循环实现圆点的动态个数渲染
                <li v-for="(item,index) in img.length" @click="yuan(index)">
                //不同图片的渲染    
                <img :src="index===dindex?'./圆点 .png':'./圆点2.png'" alt="">
                </li>
            </ul>
    </div>
</body

二，css样式

<style>
//轮播图片的位置
    #box{
        position: fixed;
        top: 100px;
        right: 150px;
    }
    #img{
       
        height: 580px;
        width: 1200px;
    }
    button{
        font-size: 50px;
    height: 60px;
    width: 100px;
    //按钮透明度设置
    opacity: 0.2;
    //按钮圆角设置
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    }
    //鼠标移入样式
    button:hover{
        background-color: darkslategray;
    }
    #left{
    position: fixed;
    top: 350px;
    left: 187px;
   
    }
    #right{
    position: fixed;
    top: 350px;
    right: 150px;
   
    }
    ul{
        list-style: none;
        position: fixed;
        top: 620px;
        left: 700px;
    }
    li{
       font-size: 10px;
        display:inline;
     
        }
        li img{
            height: 40px;
            width: 40px;
            
        }
</style>

三，script功能实现代码

<script>
    new Vue({
        el:"#box",
        
        data:{
            //定义图片数组
            img:["./nba1.png", "./nba2.png",
            "./nba3.png","./nba4.png","./nba5.png","./nba.png"
            ],
             //图片下标
            dindex:0,
            //定时器设定
            timer:null
        },
        methods:{
            //右侧点击按钮
            right(){
                clearInterval(this.timer)
                if(this.dindex<this.img.length-1){
              this.dindex++
                }else if(this.dindex==this.img.length-1){
                    this.dindex=0
                }
                console.log(this.dindex)
            },
            //左侧点击按钮
            left(){
                clearInterval(this.timer)
                if(this.dindex>0){
              this.dindex--
                }else if(this.dindex==0){
                    this.dindex=this.img.length-1
                }
                // console.log(this.dindex)
            },
            //圆角点击实现轮播效果
            yuan(index){
                clearInterval(this.timer)
                this.dindex=index
                console.log(index,this.dindex)
                
            },
            //定时器设置
            starInterval(){
                    clearInterval(this.timer);
                    this.timer==setInterval(()=>{
                        this.dindex++
                        if(this.dindex>this.img.length-1){
                            this.dindex=0
                        }
                    },3000)
            },
           
        },
         //将定时器放入mounted生命周期中
        mounted(){
            this.starInterval()
           
        }
    })
</script>

四，整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<style>
    #box{
        position: fixed;
        top: 100px;
        right: 150px;
    }
    #img{
       
        height: 580px;
        width: 1200px;
    }
    button{
        font-size: 50px;
    height: 60px;
    width: 100px;
    opacity: 0.2;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    }
    button:hover{
        background-color: darkslategray;
    }
    #left{
    position: fixed;
    top: 350px;
    left: 187px;
   
    }
    #right{
    position: fixed;
    top: 350px;
    right: 150px;
   
    }
    ul{
        list-style: none;
        position: fixed;
        top: 620px;
        left: 700px;
    }
    li{
       font-size: 10px;
        display:inline;
     
        }
        li img{
            height: 40px;
            width: 40px;
            
        }
</style>
<body>
    <div id="box">
            <button id="left" @click="left"><</button>
            <img id="img":src="img[dindex]" alt="" @mouseenter="zymInter(true)" @mouseleave="zymInter(false)">
            <button id="right" @click="right">></button>
            <ul>
                <li v-for="(item,index) in img.length" @click="yuan(index)"><img :src="index===dindex?'./圆点 .png':'./圆点2.png'" alt=""></li>
            </ul>
    </div>
</body>
<script>
    new Vue({
        el:"#box",
        
        data:{
            img:["./nba1.png", "./nba2.png",
            "./nba3.png","./nba4.png","./nba5.png","./nba.png"
            ],
           
            dindex:0,
            timer:null
        },
        methods:{
            right(){
                clearInterval(this.timer)
                if(this.dindex<this.img.length-1){
              this.dindex++
                }else if(this.dindex==this.img.length-1){
                    this.dindex=0
                }
                console.log(this.dindex)
            },
            left(){
                clearInterval(this.timer)
                if(this.dindex>0){
              this.dindex--
                }else if(this.dindex==0){
                    this.dindex=this.img.length-1
                }
                // console.log(this.dindex)
            },
            yuan(index){
                clearInterval(this.timer)
                this.dindex=index
                console.log(index,this.dindex)
                
            },
            starInterval(){
                    clearInterval(this.timer);
                    this.timer==setInterval(()=>{
                        this.dindex++
                        if(this.dindex>this.img.length-1){
                            this.dindex=0
                        }
                    },3000)
            },
           
        },
        mounted(){
            this.starInterval()
           
        }
    })
</script>
</html>