e5142ee2c5c661200fb9c8e4a23cc13e.png

其实就是把js原生轮播图的一些参数写到data里，意义不大

1. data部分

data: {
	imgs: [{
		id: 1,
		url: "https://wx2.sinaimg.cn/mw690/56155fd3gy1gawavtsqc3j21xg1abb2b.jpg"
	},
	{
		id: 2,
		url: "https://wx3.sinaimg.cn/mw690/56155fd3gy1gawaw5ofhgj21xg1abx6q.jpg"
	},
	{
		id: 3,
		url: "https://wx4.sinaimg.cn/mw690/56155fd3gy1gawawg18zpj21xg1abkjm.jpg"
	},
	{
		id: 4,
		url: "https://wx2.sinaimg.cn/mw690/56155fd3gy1gawawp8hd4j21xg1abx6q.jpg"
	},
	],
	i:0,  // 现在正在显示第0张(默认值)
	mLeft: 0,  // 图片ul的默认左边距为0 显示第0张
	timer: null  // timer设置为定时器
},

图片随便从微博上扒了一部分 (狗头.jpg)

2. html部分

<div id="app">
	<div class="container">
		<ul v-bind:style="{marginLeft:mLeft+'px'}">
			<li v-for="img in imgs">
				<img v-bind:src="img.url" alt="">
			</li>
		</ul>
	</div>
		<div class="btnControl">
		<button @click=move(-1)>上一张</button>
		<button @click=move(1)>下一张</button>
	</div>
</div>

整个轮播图的结构就是<div>里有一个横向显示的, <div>设置了 overflow: hidden

3. methods

methods: {
	move: function(to) {
		if(to==undefined){  // 如果不传入参数, 默认为移动到下一张
			to=1;
		}
		this.i=this.i+to;  // 移动到下一张或者上一张
		if(this.i>3){  // 正着走到最后一张时跳到第一张
			this.i=0;
		}
		if(this.i<0){  // 倒着走到第一张时跳到最后一张
			this.i=3;
		}
		this.mLeft=-400*this.i;  // 设置data里表示图片ul的左边距为-400 / -800 / -1200, 分别显示第二张, 第三张, 第四章
		console.log(this.mLeft);  // 获取到每调用一次move函数, mLeft的最终值(控制图片显示)
	}
}

其实也就一个函数 move() 绑定到上一张下一张按钮上

点击时可以根据按钮传递来的参数 to 设置 data 里的左外边距的参数 mLeft , 然后将这个参数绑定到图片列表的内联样式上, 实现图片的移动

4. 定时器

created:function(){  // 生命周期钩子函数, 实例被创建时设置一个定时器, 每隔3秒钟调用一次无参数的move()函数
	this.timer=setInterval(()=>{
		this.move()
	},3000)
}

在实例被创建时, 设置一个可以每隔一定时间调用一次 move() 的定时器, 让它自己动

第一次写这种东西, 不知道怎么写合适, 放一下代码吧

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <title>轮播图</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
      div,ul,li,img,button {
        margin: 0px;
        padding: 0px;
      }

      .container {
        width: 400px;
        margin: auto;
        overflow: hidden;
      }

      img {
        width: 400px;
      }

      .container ul:first-child {
        margin: 30px;
        list-style: none;
        white-space: nowrap;
        width: 1600px;
        clear: both;
        margin-left: -800px;
        transition: all .25s ease;
      }

      .container ul:first-child li {
        display: block;
        float: left;
        width: 400px;
      }
			
      .btnControl{
        width:164px;
        margin: 30px auto;
      }

      button{
        color: white;
        font-size: 16px;
        font-weight: bold;
        width: 80px;
        height: 30px;
        background: #ff313e;
        border: 0px;
        border-radius: 5px;
        box-shadow: #00000055 0 0 5px;
        outline: none;
        transition:all linear 0.30s;
      }

      button:hover{
        background: #ff2137;
      }

      button:active{
        box-shadow: #000000 3px 3px 5px;
        background: #c60a10;
      }
    </style>
    </head>
    <body>
	<div id="app">
	  <div class="container">
	    <ul v-bind:style="{marginLeft:mLeft+'px'}">
		<li v-for="img in imgs">
		  <img v-bind:src="img.url" alt="">
		</li>
	    </ul>
	  </div>
	  <div class="btnControl">
	    <button @click=move(-1)>上一张</button>
	    <button @click=move(1)>下一张</button>
	  </div>
	</div>
	<script>
	  var vm = new Vue({
	    el: "#app",
	    data: {
	      imgs: [{
		id: 1,
		url: "https://wx2.sinaimg.cn/mw690/56155fd3gy1gawavtsqc3j21xg1abb2b.jpg"
	      },
	      {
		id: 2,
		url: "https://wx3.sinaimg.cn/mw690/56155fd3gy1gawaw5ofhgj21xg1abx6q.jpg"
	      },
	      {
		id: 3,
		url: "https://wx4.sinaimg.cn/mw690/56155fd3gy1gawawg18zpj21xg1abkjm.jpg"
	      },
	      {
		id: 4,
		url: "https://wx2.sinaimg.cn/mw690/56155fd3gy1gawawp8hd4j21xg1abx6q.jpg"
	      }],
	      i:0,  // 现在正在显示第0张(默认值)
	      mLeft: 0,  // 图片ul的默认左边距为0 显示第0张
	      timer: null  // timer设置为定时器
	    },
	    methods: {
	      move: function(to) {
	        if(to==undefined){  // 如果不传入参数, 默认为移动到下一张
		  to=1;
	        }
	        this.i=this.i+to;  // 移动到下一张或者上一张
	        if(this.i>3){  // 正着走到最后一张时跳到第一张
		  this.i=0;
	        }
	        if(this.i<0){  // 倒着走到第一张时跳到最后一张
		  this.i=3;
	        }
	        this.mLeft=-400*this.i;  // 设置data里表示图片ul的左边距为-400 / -800 / -1200, 分别显示第二张, 第三张, 第四章
	        console.log(this.mLeft);  // 获取到每调用一次move函数, mLeft的最终值(控制图片显示)
	      }
	    },
	    created:function(){  // 生命周期钩子函数, 实例被创建时设置一个定时器, 每隔3秒钟调用一次无参数的move()函数
	      this.timer=setInterval(()=>{
	        this.move()
	      },3000)
            }
          })
	</script>
    </body>
</html>
<!--HbuildX粘过来缩进乱了-->
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue