1.  
  1. <style>
  2.   img{
  3.     display:block;
  4.     margin:0 auto;
  5.     width:500px;
  6.     height:500px;
  7.   }
  8.     #app li{
  9.     list-style: none;
  10.   }
  11.  
  12. </style>
  13. <body>
  14.     <div id="app">
  15.  
  16.        <img :src="img" @click="autoCg()"> <!--显示一张图片，并给图片添加点击事件-->
  17.           <ul>
  18.                     <li v-for="(item,index) in json"></li>
  19.           </ul>
  20.           <button @click="prev">上一张</button>
  21.           <button @click="next">下一张</button>
  22.    </div>
  23. </body>
  24. <script>
  25.  
  26.        new Vue({
  27.            el:'#app',
  28.            data:{
  29.                img:'./images/cao.jpg',
  30.                json:[
  31.                    "./images/cao.jpg",
  32.                    "./images/hua.jpg",
  33.                    "./images/ning.jpg",
  34.                    "./images/shu.jpg",
  35.                ],
  36.                index:0
  37.            },
  38.            methods:{
  39.                next(){
  40.                    this.img = this.json[this.index++];
  41.                    if(this.index > 3){
  42.                        this.index = 0; //当超过图片数量，返回第一张图片
  43.                    }
  44.                },
  45.                prev(){
  46.                    this.img = this.json[this.index--];
  47.                    if(this.index < 0){
  48.                        this.index = 3;
  49.                    }
  50.                    //当index值<0时，返回最后一张图片
  51.                },
  52.                //点击首张图片触发函数功能
  53.                autoCg(){
  54.                    let self = this;
  55.                    //定时器，每2秒换一张图片
  56.                    setInterval(function(){
  57.                        self.img = self.json [self.index++];
  58.                        if(self.index > 3){
  59.                            self.index = 0;
  60.                        }
  61.                    },2000);
  62.                }
  63.  
  64.            },
  65.  
  66.    })
  67. </script>
  1.  

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

  1. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Vue 实现左边导航栏且右边显示具体内容（element-ui）

    最终效果图: 现在开始进入正题: 1.安装element-ui npm i element-ui -S CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引 ...

  3. iOS史上最简单修改导航栏分隔线颜色方法!!!

    override func viewDidLoad() { super.viewDidLoad() if let imageView = self.findNavLineView(view: navi ...

  4. css制作简单的导航栏

    //css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...

  5. vue实现侧边导航栏

    <div class="sidebar"> <el-menu class="sidebar-el-menu" :default-active= ...

  6. js 实现弹性运动的简单应用----导航栏中弹性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 我的Vue之旅、05 导航栏、登录、注册 (Mobile)

    第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 ...

  8. [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

  9. iOS系统中导航栏的转场解决方案与最佳实践

    背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...

随机推荐

  1. 20155219付颖卓《网络对抗》EXP7网络欺诈技术防范

    实验后回答问题 1.通常在什么场景下容易受到DNS spoof攻击 在公共共享网络里,并且同一网段可以ping通的网络非常容易被攻击. 2.在日常生活工作中如何防范以上两攻击方法 不在不信任的公开网络 ...

  2. Codeforces1100F. Ivan and Burgers（离线+线性基）

    题目链接:传送门 思路: 按查询的右端点离线. 然后从左到右维护线性基. 每个基底更新为最右边的方案,可以让尽量多的查询享受到这个基底. 用ci维护后更新右端点为i的答案. 代码(析构1000ms,别 ...

  3. appium-doctor问题

    在电脑上安装Appium,打开CDM运行appium-doctor,运行报错提示如下 检查运营Java.javac.java -version均有返回值,说明我的配置是成功,输入where Java, ...

  4. 多线程——C++

    线程: 先说进程,进程是应用程序的执行实例,每个进程拥有其私有的虚拟地址空间.代码.数据和其它系统资源组成.进程在运行时创建的资源随着进程的终止而死亡. 而线程是一个独立的执行流,是进程内部的一个独立 ...

  5. Linux文件编辑时光标操作

    一.移动光标类命令 h :光标左移一个字符 l :光标右移一个字符 space:光标右移一个字符 Backspace:光标左移一个字符 k或Ctrl+p:光标上移一行 j或Ctrl+n :光标下移一行 ...

  6. 构建之法 chapter 8 需求分析 ——读书心得

    需求分析,是软件工程开发的第一步,准确全面地找到用户的需求,尽可能满足用户的要求,是软件惺惺发展的基础.所以需求分析很重要.具体来说有以下几个步骤: 1.获取和引导需求:软件团队需要找到软件的利益相关 ...

  7. C# 枚举用法

    public static class EnumExtensions { public static string GetDescription(this Enum value) { return v ...

  8. FFT算法详解

    啊…本来觉得这是个比较良心的算法没想到这么抽搐这个算法真是将一个人的自学能力锻炼到了极致qwqqwqqwq 好的,那我们就开始我们的飞飞兔FFTFFTFFT算法吧! 偷偷说一句,FFTFFTFFT的代 ...

  9. jquery案例

    调用js成员 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>& ...

  10. 我发起并创立了一个 Javascript 前端库 开源项目 jWebForm

    在线演示地址: ( 在线演示 云平台 由 Kooboo 提供  https://www.kooboo.com/ ) 按钮:      http://iwebform.kgeking.kooboo.si ...