<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. 内联元素padding与高度可控的分隔线实例页面
			
    html: <a href="">登录</a><a href="">注册</a> css: a + a:befo ...
    
			
    2. 
						
  2. Codeforces1100F. Ivan and Burgers（离线+线性基）
			
    题目链接:传送门 思路: 按查询的右端点离线. 然后从左到右维护线性基. 每个基底更新为最右边的方案,可以让尽量多的查询享受到这个基底. 用ci维护后更新右端点为i的答案. 代码(析构1000ms,别 ...
    
			
    3. 
						
  3. 20165313 《网络对抗技术》 Kali安装
			
    一.目的要求 下载 安装 网络 共享 软件源 二.主要步骤 我主要是按照最新超详细虚拟机VMware安装Kali Linux 这个方法做的就没有步骤描述了. 安装结果图: 注意事项 安装过程中如果没有 ...
    
			
    4. 
						
  4. javascript中缺少分号结尾的情况
			
    首先看一段代码 function* fib (max) { let a = 0 let b = 1 let n = 1 while (n < max) { yield a; [a, b] = [ ...
    
			
    5. 
						
  5. 使用GDB调试将符号表与程序分离后的可执行文件
			
    环境: Centos7.3.GCC4.8.5 适用场景: 由于调试信息比较大,通常将程序分离为可执行程序和符号信息文件,只对外发布可执行程序,需要调试时再将符号信息文件附加. 一.创建可执行程序: u ...
    
			
    6. 
						
  6. 2018-2019-2 网络对抗技术 20165308 Exp2 后门原理与实践
			
    2018-2019-2 网络对抗技术 20165308 Exp2 后门原理与实践 1.实验内容 (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用soc ...
    
			
    7. 
						
  7. operator用法：隐式类型转换
			
    operator它有两种用法,一种是operator overloading(操作符重载),一种是operator casting(操作隐式转换). 1.操作符重载C++可以通过operator实现重 ...
    
			
    8. 
						
  8. python爬虫---selenium库的用法
			
    python爬虫---selenium库的用法 selenium是一个自动化测试工具,支持Firefox,Chrome等众多浏览器 在爬虫中的应用主要是用来解决JS渲染的问题. 1.使用前需要安装这个 ...
    
			
    9. 
						
  9. 友善RK3399/NanoPC-T4开发板wiringPi的C语言访问GPIO外设实例讲解 -【申嵌视频】
			
    1 wiringPi简介 wiringPi库最早是由Gordon Henderson所编写并维护的一个用C语言写成的类库,除了GPIO库,还包括了I2C库.SPI库.UART库和软件PWM库等,由于w ...
    
			
    10. 
						
  10. JSON格式字符串作为存储过程参数解析
			
    1.新建可编程性的表值函数(SQLSERVER) USE [xxxx] GO /****** Object: UserDefinedFunction [dbo].[parseJSON] Script  ...
    
			
    11.