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