<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. sku
			
    以淘宝为例,sku是具体到某一个商家具体规格商品,比如某商家红色64g的iPhone6,sku对应有对应的价格和库存.而SPU就是我们在输入框里输入的iPhone6,它是多个商家的集合.淘宝的“宝贝” ...
    
			
    2. 
						
  2. new Date().getTime()和System.currentTimeMillis()对比
			
    我在工作中,看项目组的代码时,在代码中会发现一个有趣的现象,有使用new Date().getTime()来获取时间戳的, 也有使用System.currentTimeMillis()来获取时间戳的, ...
    
			
    3. 
						
  3. Dotnetty 的心跳
			
    只要你不按照实例中使用libuv,就不会有问题了. 主要区别在于 WorkerEventLoopGroup 和 MultithreadEventLoopGroup 之间.
    
			
    4. 
						
  4. 如何处理Excel空行问题
			
    在操作excel的时候, 可能会出现很多的无效数据行. 下面是一个我的简单处理方式 public static bool DataSetToExcel(DataSet dataSet, string  ...
    
			
    5. 
						
  5. 9. Web browser-related （网页浏览器相关 4个）
			
    Firefox NoScript是Firefox的插件,可以阻止JavaScript,Java,Flash和其他插件内容(允许您选择性地重新启用某些站点). 它还提供跨站点脚本保护. 这主要是为了保持 ...
    
			
    6. 
						
  6. 第五章jQuery
			
    DOM文档加载的步骤 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. DOM树构建完成. 加载图片等外部文件. 页面加载完毕. 执行时间不同 window.onload必须等到页 ...
    
			
    7. 
						
  7. Linux主机安全配置规范
			
    一.账号口令 1 配置口令最小长度     在文件/etc/login.defs中设置 PASS_MIN_LEN,参考值:8 2 配置口令生存周期     在文件/etc/login.defs中设置  ...
    
			
    8. 
						
  8. opendistro 试用
			
    以前转载过一篇别人的关于opendistro的文章,还好使用docker-compose 运行,很方便,所以自己也跑下 环境准备 docker-compose 文件 version: '3' serv ...
    
			
    9. 
						
  9. 深度系统 deepin 15.9 关闭桌面
			
    深度系统 deepin 15.9 关闭桌面 由于特别的原因,关闭深度的桌面. sudo systemctl disable lightdm 如果需要在命令模式进入桌面可以使用以下命令. sudo se ...
    
			
    10. 
						
  10. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165308 张士洋
			
    2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165308 张士洋 1.进入官网下载Kali Linux VirtualBox版本的镜像文件. 2.解压并 ...
    
			
    11.