<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. 03MYSQL数据库
			
    mySQL 数据库 储存数据,属于中小型数据库   默认端口号 3306  密码root sql是一门编程语言 结构化查询语言  是强类型语言(定义变量时要指定变量类型) 字符串有两种类型:  定长: ...
    
			
    2. 
						
  2. c#上课总结
			
    private 是完全私有的,只有当前类中的成员能访问到. protected 是受保护的,只有当前类的成员与继承该类的类才能访问.   Ctrl+k+c  多行注释Ctrl+k+u 解除注释   e ...
    
			
    3. 
						
  3. Cookie保存用户名和密码
			
    首次登录: 第二次登录: 百度网盘: 链接: https://pan.baidu.com/s/12W4B5-Bfyc_021oyVYkEJw 提取码: r55h
    
			
    4. 
						
  4. BF匹配器
			
    对于BF匹配器,首先我们得用cv2.BFMatcher()创建BF匹配器对象.它取两个可选参数,第一个是normType.它指定要使用的距离量度.默认是cv2.NORM_L2.对于SIFT,SURF很 ...
    
			
    5. 
						
  5. Git从库中移除已删除大文件
			
    写在前面大家一定遇到过在使用Git时,不小心将一个很大的文件添加到库中,即使删除,记录中还是保存了这个文件.以后不管是拷贝,还是push/pull都比较麻烦.今天在上传工程到github上,发现最大只 ...
    
			
    6. 
						
  6. 多个ROS工作空间常见的问题
			
    1. 在/home/user_name/.bashrc文件中写入多个工作空间的环境变量,这样会导致环境变量之间相互覆盖.最常见的问题就是找不到工作空间中某个launch文件.节点.rviz插件等. 解 ...
    
			
    7. 
						
  7. 17款提高编码效率的CSS工具
			
    摘要:作为WEB前端开发人员,你的工作可能很大一部分都在编写CSS代码,为了提高前端开发人员编写CSS代码的效率,编程文库从 网上搜集了17款可以提高你CSS代码效率的CSS工具,它们可以帮助你快速生 ...
    
			
    8. 
						
  8. bootloader介绍
			
    Bootloader是系统加电后运行的第一段软件代码,主要任务就是将内核映像从硬盘读到RAM中,然后跳转到内核的入口点去运行,也即开始启动操作系统. 简单的说,Bootloader就是在操作系统运行内 ...
    
			
    9. 
						
  9. eclipse项目上传服务器注意事项
			
    1.先准备服务器环境 2 数据库导入,tomcat安装 3 开放服务器端口,配置网络 4.修改本地代码修改为发布版本,即ip,账号密码数据库等 5 变动的信息应该写在配置文件或者一个全局产量中,这样才 ...
    
			
    10. 
						
  10. thymeleaf的fragment例子
			
    fragment介绍 fragment类似于JSP的tag,在html中文件中,可以将多个地方出现的元素块用fragment包起来使用. 定义fragment 新建foot.html文件 <!D ...
    
			
    11.