vue中的轮播图

最新推荐文章于 2023-10-04 17:09:17 发布

转载最新推荐文章于 2023-10-04 17:09:17 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chvv/p/9683678.html

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

	<style>
		.box1{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color: blue;
		}

		.box3{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}

		.pic ul li{
			list-style: none;
			float: left;
			margin-left: 10px;
			width: 30px;
			background-color: pink;
		}
	</style>

</head>
<body>

	<div id="okk">
		<span v-bind:title='time'>鼠标悬停几秒后当前时间</span>
		<h4 v-bind:title='title'>学习vue</h4>
		<img v-bind:src="imgSrc" alt="">
	</div>

	<hr>
	<hr>


	<div id="okk2">
		<div v-bind:class={box1:isactive}></div>
	</div>

	<hr>

	<!-- //数据驱动视图 -->

	<div id="okk3">
		<div class='box1' v-bind:class='{box2:isBlue}'></div>
		<button @click='changecolor'>切换</button>
		<button v-on:click='count+=1'>加{{count}}</button>

		<div class="pic">
			<img :src="currentSrc" @mouseenter='closeTimer' @mouseleave='startTimer'>

			<ul>
				<li v-for='(item,index) in imgArr' v-bind:style="{ color: activeColor }" @click='changePicture(item)'>
					{{index+1}}
				</li>
			</ul>
			<button @click='preImg'>上一页</button>
			<button @click='nextImg'>下一页</button>

		</div>

	</div>
	
	

	<script>
		new Vue({
			el:'#okk',
			data:{
				time:`页面加载于${new Date().toLocaleString()}`,
				title:'vue',
				imgSrc:'./img/11.jpg'
			}
		})


		new Vue({
			el:'#okk2',
			data:{
				isactive:true
			}
		})


		new Vue({
			el:'#okk3',
			data:{
				isBlue:true,
				count:0,
				imgArr:[
					{id:1,src:'./img/22.jpg'},
					{id:1,src:'./img/33.jpg'},
					{id:1,src:'./img/44.jpg'},
					{id:1,src:'./img/55.jpg'},
				],
				currentSrc:'./img/22.jpg',
				currentIndex:0,
				activeColor:'red',
				timer:null
			},
			created(){
				// 获取cookie session
				this.timer = setInterval(this.nextImg,2000)
			},
			methods:{
				changecolor:function () {
					this.isBlue = !this.isBlue
				},
				changePicture:function (item) {
					this.currentSrc = item.src;
				},
				nextImg(){
					if(this.currentIndex==this.imgArr.length-1){
						this.currentIndex=-1;
					}
					this.currentIndex++;
					this.currentSrc = this.imgArr[this.currentIndex].src;
				},
				preImg(){

					if(this.currentIndex==0){
						this.currentIndex=this.imgArr.length;
					}
					this.currentIndex--;
					this.currentSrc = this.imgArr[this.currentIndex].src;
				},
				closeTimer(){
					clearInterval(this.timer);
				},
				startTimer(){
					this.timer = setInterval(this.nextImg,2000)
				}
			},
			
		})
	</script>
	
</body>
</html>

转载于:https://www.cnblogs.com/chvv/p/9683678.html