<style>

  img{

    display:block;

    margin:0 auto;

    width:500px;

    height:500px;

  }

    #app li{

    list-style: none;

  }

</style>

<body>

    <div id="app">

       <img :src="img" @click="autoCg()"> <!--显示一张图片，并给图片添加点击事件-->

          <ul>

                    <li v-for="(item,index) in json"></li>

          </ul>

          <button @click="prev">上一张</button>

          <button @click="next">下一张</button>

   </div>

</body>

<script>

       new Vue({

           el:'#app',

           data:{

               img:'./images/cao.jpg',

               json:[

                   "./images/cao.jpg",

                   "./images/hua.jpg",

                   "./images/ning.jpg",

                   "./images/shu.jpg",

               ],

               index:0

           },

           methods:{

               next(){

                   this.img = this.json[this.index++];

                   if(this.index > 3){

                       this.index = 0; //当超过图片数量，返回第一张图片

                   }

               },

               prev(){

                   this.img = this.json[this.index--];

                   if(this.index < 0){

                       this.index = 3;

                   }

                   //当index值<0时，返回最后一张图片

               },

               //点击首张图片触发函数功能

               autoCg(){

                   let self = this;

                   //定时器，每2秒换一张图片

                   setInterval(function(){

                       self.img = self.json [self.index++];

                       if(self.index > 3){

                           self.index = 0;

                       }

                   },2000);

               }

           },

   })

</script>




												


											
vue简单的导航栏的更多相关文章
	

    
								
  1. 用jquery制作一个简单的导航栏
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    2. 
						
  2. Vue 实现左边导航栏且右边显示具体内容（element-ui）
		
    最终效果图: 现在开始进入正题: 1.安装element-ui npm i element-ui -S CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引 ...
    
		
    3. 
						
  3. iOS史上最简单修改导航栏分隔线颜色方法!!!
		
    override func viewDidLoad() { super.viewDidLoad() if let imageView = self.findNavLineView(view: navi ...
    
		
    4. 
						
  4. css制作简单的导航栏
		
    //css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...
    
		
    5. 
						
  5. vue实现侧边导航栏
		
    <div class="sidebar"> <el-menu class="sidebar-el-menu" :default-active= ...
    
		
    6. 
						
  6. js 实现弹性运动的简单应用----导航栏中弹性
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    7. 
						
  7. 我的Vue之旅、05 导航栏、登录、注册 (Mobile)
		
    第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...
    
		
    8. 
						
  8. [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏
		
    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...
    
		
    9. 
						
  9. iOS系统中导航栏的转场解决方案与最佳实践
		
    背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python入门 （二）
			
    本文是个人python学习笔记,学习资料为廖雪峰python教程,如需更多内容,请移步廖老师官方网站. 一 函数式编程Functional Programming 函数式编程允许把函数本身作为参数传入 ...
    
			
    2. 
						
  2. PAT乙级考前总结（五)
			
    字符串处理 1003 我要通过! (20 分) “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否 ...
    
			
    3. 
						
  3. mac下  部分服务启动，结束, 查看状态的命令
			
    以sshd服务为例 启动sshd服务:sudo launchctl load -w /System/Library/LaunchDaemons/ssh.plist 停止sshd服务:sudo laun ...
    
			
    4. 
						
  4. CPU：chip、core 和 processor 的关系
			
    # 查看物理CPU个数    (chip) 物理cpu数:主板上实际插入的cpu数量,可以数不重复的 physical id 有几个(physical id)cat /proc/cpuinfo| gr ...
    
			
    5. 
						
  5. 2019.4.24 一题（CF 809E）——推式子+虚树
			
    题目:http://codeforces.com/contest/809/problem/E
    
			
    6. 
						
  6. sql server数据库入门
			
    create database 学生信息 on primary  //建立在主文件文件组 ( name='学生信息_data', filename='D:\2011上半年度\数据库\sql代码\xue ...
    
			
    7. 
						
  7. jupyter notebook快捷键使用指南
			
    Jupyter Notebook 是一个交互式笔记本程序, 其有丰富的快捷键来便捷的完成工作.Notebook 有两种键盘输入模式.即命令模式和编辑模式,这与 Vim 有些类似.在编辑模式下,可以往单 ...
    
			
    8. 
						
  8. c# 执行javascript 脚本
			
    /// <summary> /// 执行JS /// this.ExecuteScript("get('{0}')".FormatWith(token0), File. ...
    
			
    9. 
						
  9. redhat 开课啦
			
    今天是三八女神节. 终于开课啦,为考取RHCE准备.
    
			
    10. 
						
  10. Spring boot 线上部署
			
    1.修改Spring Boot 1.添加:spring-boot-maven-plugin 插件 <build> <plugins> <plugin> <gr ...
    
			
    11.