devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue实现轮播图效果_vue轮播图怎么实现

作者：小蓝xlanll | 2024-03-16 17:00:58

赞

踩

vue轮播图怎么实现

1,实现轮左右按键轮播效果，采用数组下标指定轮播图片，定义一个dindex与index下标相比较。
2，创建轮播的图片的数组
3，实现下方圆点点击轮播图片，采用动态绑定和数组的动态样式实现未点击的白色和点击的黑色
dindex与index相比较两值相不一致就是白色反之为黑色
4，实现图片定时轮播，创建定时器，将方法放入mounted生命周期中使其定时轮播，点击按钮轮播时清除定时器

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

一，body， HTML代码

  1. <body>
  2.     <div id="box">
  3.             <button id="left" @click="left">//左侧点击按钮
  4.                         <
  5.             </button>
  6.                 <img id="img":src="img[dindex]" >//轮播的图片采用动态绑定渲染
  7.             <button id="right" @click="right">
  8.                         >
  9.             </button>
  10.             <ul>
  11.                 //采用v-for循环实现圆点的动态个数渲染
  12.                 <li v-for="(item,index) in img.length" @click="yuan(index)">
  13.                 //不同图片的渲染    
  14.                 <img :src="index===dindex?'./圆点 .png':'./圆点2.png'" alt="">
  15.                 </li>
  16.             </ul>
  17.     </div>
  18. </body

二，css样式

  1. <style>
  2. //轮播图片的位置
  3.     #box{
  4.         position: fixed;
  5.         top: 100px;
  6.         right: 150px;
  7.     }
  8.     #img{
  9.        
  10.         height: 580px;
  11.         width: 1200px;
  12.     }
  13.     button{
  14.         font-size: 50px;
  15.     height: 60px;
  16.     width: 100px;
  17.     //按钮透明度设置
  18.     opacity: 0.2;
  19.     //按钮圆角设置
  20.     border-top-left-radius: 20%;
  21.     border-top-right-radius: 20%;
  22.     border-bottom-left-radius: 20%;
  23.     border-bottom-right-radius: 20%;
  24.     }
  25.     //鼠标移入样式
  26.     button:hover{
  27.         background-color: darkslategray;
  28.     }
  29.     #left{
  30.     position: fixed;
  31.     top: 350px;
  32.     left: 187px;
  33.    
  34.     }
  35.     #right{
  36.     position: fixed;
  37.     top: 350px;
  38.     right: 150px;
  39.    
  40.     }
  41.     ul{
  42.         list-style: none;
  43.         position: fixed;
  44.         top: 620px;
  45.         left: 700px;
  46.     }
  47.     li{
  48.        font-size: 10px;
  49.         display:inline;
  50.      
  51.         }
  52.         li img{
  53.             height: 40px;
  54.             width: 40px;
  55.             
  56.         }
  57. </style>

三，script功能实现代码

  1. <script>
  2.     new Vue({
  3.         el:"#box",
  4.         
  5.         data:{
  6.             //定义图片数组
  7.             img:["./nba1.png", "./nba2.png",
  8.             "./nba3.png","./nba4.png","./nba5.png","./nba.png"
  9.             ],
  10.              //图片下标
  11.             dindex:0,
  12.             //定时器设定
  13.             timer:null
  14.         },
  15.         methods:{
  16.             //右侧点击按钮
  17.             right(){
  18.                 clearInterval(this.timer)
  19.                 if(this.dindex<this.img.length-1){
  20.               this.dindex++
  21.                 }else if(this.dindex==this.img.length-1){
  22.                     this.dindex=0
  23.                 }
  24.                 console.log(this.dindex)
  25.             },
  26.             //左侧点击按钮
  27.             left(){
  28.                 clearInterval(this.timer)
  29.                 if(this.dindex>0){
  30.               this.dindex--
  31.                 }else if(this.dindex==0){
  32.                     this.dindex=this.img.length-1
  33.                 }
  34.                 // console.log(this.dindex)
  35.             },
  36.             //圆角点击实现轮播效果
  37.             yuan(index){
  38.                 clearInterval(this.timer)
  39.                 this.dindex=index
  40.                 console.log(index,this.dindex)
  41.                 
  42.             },
  43.             //定时器设置
  44.             starInterval(){
  45.                     clearInterval(this.timer);
  46.                     this.timer==setInterval(()=>{
  47.                         this.dindex++
  48.                         if(this.dindex>this.img.length-1){
  49.                             this.dindex=0
  50.                         }
  51.                     },3000)
  52.             },
  53.            
  54.         },
  55.          //将定时器放入mounted生命周期中
  56.         mounted(){
  57.             this.starInterval()
  58.            
  59.         }
  60.     })
  61. </script>

四，整体代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./node_modules/vue/dist/vue.js"></script>
  9. </head>
  10. <style>
  11.     #box{
  12.         position: fixed;
  13.         top: 100px;
  14.         right: 150px;
  15.     }
  16.     #img{
  17.        
  18.         height: 580px;
  19.         width: 1200px;
  20.     }
  21.     button{
  22.         font-size: 50px;
  23.     height: 60px;
  24.     width: 100px;
  25.     opacity: 0.2;
  26.     border-top-left-radius: 20%;
  27.     border-top-right-radius: 20%;
  28.     border-bottom-left-radius: 20%;
  29.     border-bottom-right-radius: 20%;
  30.     }
  31.     button:hover{
  32.         background-color: darkslategray;
  33.     }
  34.     #left{
  35.     position: fixed;
  36.     top: 350px;
  37.     left: 187px;
  38.    
  39.     }
  40.     #right{
  41.     position: fixed;
  42.     top: 350px;
  43.     right: 150px;
  44.    
  45.     }
  46.     ul{
  47.         list-style: none;
  48.         position: fixed;
  49.         top: 620px;
  50.         left: 700px;
  51.     }
  52.     li{
  53.        font-size: 10px;
  54.         display:inline;
  55.      
  56.         }
  57.         li img{
  58.             height: 40px;
  59.             width: 40px;
  60.             
  61.         }
  62. </style>
  63. <body>
  64.     <div id="box">
  65.             <button id="left" @click="left"><</button>
  66.             <img id="img":src="img[dindex]" alt="" @mouseenter="zymInter(true)" @mouseleave="zymInter(false)">
  67.             <button id="right" @click="right">></button>
  68.             <ul>
  69.                 <li v-for="(item,index) in img.length" @click="yuan(index)"><img :src="index===dindex?'./圆点 .png':'./圆点2.png'" alt=""></li>
  70.             </ul>
  71.     </div>
  72. </body>
  73. <script>
  74.     new Vue({
  75.         el:"#box",
  76.         
  77.         data:{
  78.             img:["./nba1.png", "./nba2.png",
  79.             "./nba3.png","./nba4.png","./nba5.png","./nba.png"
  80.             ],
  81.            
  82.             dindex:0,
  83.             timer:null
  84.         },
  85.         methods:{
  86.             right(){
  87.                 clearInterval(this.timer)
  88.                 if(this.dindex<this.img.length-1){
  89.               this.dindex++
  90.                 }else if(this.dindex==this.img.length-1){
  91.                     this.dindex=0
  92.                 }
  93.                 console.log(this.dindex)
  94.             },
  95.             left(){
  96.                 clearInterval(this.timer)
  97.                 if(this.dindex>0){
  98.               this.dindex--
  99.                 }else if(this.dindex==0){
  100.                     this.dindex=this.img.length-1
  101.                 }
  102.                 // console.log(this.dindex)
  103.             },
  104.             yuan(index){
  105.                 clearInterval(this.timer)
  106.                 this.dindex=index
  107.                 console.log(index,this.dindex)
  108.                 
  109.             },
  110.             starInterval(){
  111.                     clearInterval(this.timer);
  112.                     this.timer==setInterval(()=>{
  113.                         this.dindex++
  114.                         if(this.dindex>this.img.length-1){
  115.                             this.dindex=0
  116.                         }
  117.                     },3000)
  118.             },
  119.            
  120.         },
  121.         mounted(){
  122.             this.starInterval()
  123.            
  124.         }
  125.     })
  126. </script>
  127. </html>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号