zoukankan      html  css  js  c++  java
  • Vue轮播图

    own:

    version 1.0.0:

    !DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,9,10,11">
        <title>myhtml</title>
        <style type="text/css">
        .lunbo:after {
            content: "";
            display: block;
            clear: both;
    }
            *{
                padding: 0px;
                margin: 0px;
    
            }
            #app{
                margin: 200px 0px 200px 200px;
            }
            ul{
                width: 180px;
                list-style: none;
            }
            ul li {
                float: left;
                width: 30px;
                height: 30px;
                margin: 5px;
                background: purple;
                text-align: center;
                color:white;
            }
    
        </style>
    </head>
    
    <body>
        <div id="app">
            <div class="lunbo">
                <!-- 给图片绑定了鼠标移入、移出事件 -->
                <img v-bind:src='currentSrc' v-on:mouseenter='closeTimer' @mouseleave='openTimer'>
                <ul>
                    <!-- index是当前项的索引。 -->
                    <!-- 如果imager是字典取得就是name = k值,index = 索引,否则其他只能取索引值 -->
                    <li v-for = "(item,name) in imgArr" @click='currenHanlde(item)' v-on:mouseenter='closeTimer' @mouseleave='openTimer' >
                        {{name+1}}</li>
                </ul>
            </div>
            <div>
                    <!-- 绑定了鼠标移入、移出事件、点击事件 -->
                <button v-on:mouseenter='closeTimer' @mouseleave='openTimer' v-on:click='previousImg' >
                    上一张</button>
                    <!-- 绑定了鼠标移入、移出事件 点击事件 -->
                <button v-on:mouseenter='closeTimer'  @mouseleave='openTimer'  v-on:click='nextImg'>
                    下一张</button>
            </div>
        </div>
    
        <script src="./js/vue.js" type="text/javascript"></script>
    
        <script type="text/javascript">
        var myapp = new Vue({
            el:'#app',
            data:{
                imgArr:[
                {id:1,src:'./images/1.png'},
                {id:2,src:'./images/2.png'},
                {id:3,src:'./images/3.png'},
                {id:4,src:'./images/4.png'},
                ],
                // src上的计算属性
                currentSrc:'./images/1.png',
                //创建了一个索引值,方便操作选择合适的视图
                currentIndex:0,
                //用来停止自动执行的 nextImag 函数
                timer:null,
    
                // cookie session 执行之前做点什么
                created(){
                // 设置时间间隔 每2秒执行一次 nextImag 函数
                this.timer = setInterval(this.nextImg,2000)
            },
            },
            
            methods:{
                // 点击1,2,3,4选项 切换到指定图片
                currenHanlde(item){
                    this.currentSrc =  item.src
    
                },
                //上一张图片
                previousImg(){
                    //如果是图片是当前的第一张,我就跳转到第四张
                    if(this.currentIndex == 0){
                        this.currentIndex = this.imgArr.length
                    }
                    //索引值自减1
                    this.currentIndex--;
                    // 通过索引值 控制选取制定的src 并且 赋值给currentSrc
                    this.currentSrc = this.imgArr[this.currentIndex].src
    
                },
                // 下一张图片
                nextImg(){
                    // 如果图片是最后一张我就 跳转到最后一张
                    if (this.currentIndex == this.imgArr.length-1){
                        //currentIndex == -1 在后面再加1就是0了。
                        this.currentIndex=-1
                    }
                    // 索引自加1
                    this.currentIndex++;
                    // 通过索引值 控制选取制定的src 并且 赋值给currentSrc
                    this.currentSrc = this.imgArr[this.currentIndex].src
                },
                //鼠标移入视图 我就停止 自动时间 间隔执行
                closeTimer(){
                    clearInterval(this.timer);
                    
                },
                // 当鼠标移出视图 我就再次执行created 方法 
                openTimer(){
                    this.created();
                }
            }
        }) 
        </script>
    </body>
    </html>
    View Code
  • 相关阅读:
    volley框架使用
    Insert Interval
    candy(贪心)
    Best Time to Buy and Sell Stock
    Best Time to Buy and Sell Stock III
    distinct subsequences
    edit distance(编辑距离,两个字符串之间相似性的问题)
    trapping rain water
    word break II(单词切分)
    sudoku solver(数独)
  • 原文地址:https://www.cnblogs.com/Rivend/p/11904248.html
Copyright © 2011-2022 走看看