<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. Measuring Text Difficulty Using Parse-Tree Frequency
			
    https://nlp.lab.arizona.edu/sites/nlp.lab.arizona.edu/files/Kauchak-Leroy-Hogue-JASIST-2017.pdf In p ...
    
			
    2. 
						
  2. 自动化测试_Mac安装python+selenium
			
    1.下载安装(参照下文) https://blog.csdn.net/kacylining/article/details/60587484 https://www.zhihu.com/questio ...
    
			
    3. 
						
  3. 认识Ajax
			
    1.简介 AJAX 相当于异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网 ...
    
			
    4. 
						
  4. linux磁盘分区笔记
			
    磁盘基本概念: 硬盘结构:盘片+磁头(盘片可以有多个),工作时盘片高速运转,磁头读取数据 U盘.SSD固态硬盘是用闪存来制作的设备,没有盘片和磁头 Linux磁盘文件名: Linux所有设备都抽象为文 ...
    
			
    5. 
						
  5. LibreOffice字体问题解决；从window复制到Ubuntu
			
    拷贝或下载windows系统的Fonts字体集到对应的linux系统下;以ubuntu16.04系统为例. 1.进入windows系统,到C:WindowsFonts目录,复制拷贝自己需要的字体(也可 ...
    
			
    6. 
						
  6. 2019嘉韦思杯线上初赛writeup
			
    1 土肥原贤二 看到页面怀疑是sql注入,写了个4'进去就发生报错.could not to the database You have an error in your SQL syntax; ch ...
    
			
    7. 
						
  7. flume安装配置
			
    1 下载安装包并解压 下载地址:http://flume.apache.org/download.html 解压:tar zxvf apache-flume-1.8.0-bin.tar.gz 2 配置 ...
    
			
    8. 
						
  8. 测试miniconda，python以及机器学习包是否安装成功
			
    1.测试安装版本 conda -V python -V 2.安装的命令 (1)库升级和安装 升级全部库:  conda upgrade --all [不知道为什么,我的conda install nu ...
    
			
    9. 
						
  9. 添加ssl证书
			
    ssl证书会使你的网站更加安全,防止isp在你的网站显示时添加广告,浏览网页时地址栏左边有一个绿色安全的图标,使用户感觉更加安全放心. 颁发ssl证书的机构很多,有收费的,也有免费的.当然对于自己的小 ...
    
			
    10. 
						
  10. ARM Cortex M0 程序映像和启动流程
			
    
			
    11.