VUE实现轮播图案例

最新推荐文章于 2024-01-30 15:09:55 发布

杨乙燃5132

最新推荐文章于 2024-01-30 15:09:55 发布

阅读量2.4k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript html5 css

本文链接：https://blog.csdn.net/xiongIT/article/details/123940856

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现思路：

1.将vue的框架封装在function中，在界面刷新时调用，将要轮播的图片存放在data中，还有下面的列表也分别保存在data中的一个数组中，然后每隔一段时间进行自动切换的函数写在methods中，注意函数要调用的话，就要在生命周期函数中调用，不然的话就没有用。
2.认识到这里需要的是setinterval（）、而不是setimeout()函数：

setTimeout()和setInterval()经常被用来处理延时和定时任务。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。
setTimeout()只执行一次，而setInterval可以多次调用。
n的设置：方便我们进行操作，比如循环到第几个，下面的小黑点也相应的变色，并且控制循环播放，当n等于数组的个数时，自动置0，从头开始。
html页面写好大的框架后，用v-for来控制，需要注意的是用v-for的时候一定要加上:key,

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
      *{
    margin:0;
    padding:0;
}
ul {
    list-style-type:none;
}
body {
    font-size: 14px;
    background: #fff;
    overflow-y:scroll;
    overflow-x:hidden;
}
html,body {
    max-width:720px;
    height:100%;
    margin:0 auto;
}
.index-content .banner {
    position: relative;
}
.index-content .banner .banner-circle {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    color: #fff;
}
.index-content .banner .banner-circle li{
    display:inline-block;
    background: rgba(0,0,0,.3);
    border-radius: 50%;
    padding:5px;
    margin:2px;
}
.index-content .banner .banner-circle ul {
    text-align: center;
}
.index-content .banner .banner-circle .selected {
    background: rgba(0,0,0,.8);
}
.index-content .banner img {
    width: 100%;
    margin: 0;
    padding: 0;
}
h1{
	margin-left: 300px;
}
 </style>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>  
  <div class="index-content" id="app">
    <div class="banner">
		<h1>轮播图</h1>
        <img  v-for="(v,i) in img " :key="i" :src="v" v-show="i==n"/>   
        <div class="banner-circle">
            <ul>
                <li  v-for="(v,i) in img " :key="i" :class="i==n ?'selected':''"></li>  
            </ul> 
        </div>
    </div>
  </div>
   <script>    
window.onload = function(){
    new Vue({
        el:"#app",
        data:{
            img:[
				 "./images/1.jpg",
                 "./images/2.jpg",
                 "./images/3.jpg",
                "./images/4.jpg"
			],
            n:2
        },
        methods:{
            fun:function(){
                //setInterval(函数体,时间)
                setInterval(this.play,2000)
            },
            play:function(){
                this.n++;
                if(this.n == this.img.length){
                    this.n = 0;
                }
            }
        },
        //生命周期  钩子函数   挂载完成
        mounted:function(){    
            this.fun()
        }
    })
}
  </script>
</body>
</html>