图片轮播和列表音乐播放

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .show-test{
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .show_yellow{
            width: 50px;
            height: 50px;
            background-color: yellow;
        }

        .a-img{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .lunbo ul{
            width: 100%;
            overflow: hidden;
            list-style: none;
        }
        .lunbo ul li{
            text-align: center;
            width: 40px;
            float: left;
            background: purple;
            margin: 10px;

        }
        .img_checked{
            text-align: center;
            width: 40px;
            float: left;
            background: red!important;
            margin: 10px;
        }

    </style>
</head>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>

<body>
    <div id="app">
        <!-- 模板语言：可以进行简单的计算，可以引入Vue对象的值， -->
        <h1>{{msg}}</h1>
        <h1>{{1+1}}</h1>
        <h1>{{'hello'}}</h1>
        <h1>{{1>0?'Y':'N'}}</h1>

        <!-- 指令系统 -->
        <div class="show-test" v-if='show'>哈哈哈</div>
        <div class="show-test" v-show='show'>嘿嘿嘿</div>
        <!-- v-for -->
        <ul v-for="(site,index) in array_test">
            <li>
                <span>{{index+1}}</span>{{site}}
            </li>
        </ul>
        <ul v-for="(title,data) in object_test">
            <li>
                {{data}}:<span>{{title}}</span>
            </li>
        </ul>

        <!-- v-on -->
        <button v-on:click="coloru">
            切换
        </button>

        <!-- v-bind -->
        <div class="show-test" v-bind:class="{show_yellow:bcolor}">
            color
        </div>

        <img v-bind:src="show_img" v-on:mouseenter="closeTimer" v-on:mouseleave="openTimer">
        <div class="lunbo">
            <ul>
                <li v-for="(item,index) in img_array" v-on:click="find_img(index)" v-bind:class="{img_checked:img_checked(index)}">{{index+1}}</li>
            </ul>
            <button v-on:click="up_img">上一张</button>
            <button v-on:click="next_img">下一张</button>
            
        </div>
 
        



    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello vue",
            show:false,
            array_test:["北京","南京","东京"],
            object_test:{"name":"aike","age":18},
            bcolor:false,
            img_array:[
                {"title":1, "src":"img/1.png"},
                {"title":2, "src":"img/2.png"},
                {"title":3, "src":"img/3.png"},
                {"title":4, "src":"img/4.png"},
            ],
            show_img:"img/1.png",
            img_count:0,
            li_color:false,
            // 选择的图片页码标识为红色
            img_checked:function(index){
                if(this.img_count==index){
                    return true
                }else{
                    return false
                }
            },
            timer:null,
            
            
        },

        //开启生命周期，每秒执行下一张图片函数，实现轮播
        created(){
            this.timer=setInterval(this.next_img,1000)
        },


        methods:{
            coloru(){
                // $this.attr("class", "show_yellow")
                this.show=!this.show;
                this.bcolor=!this.bcolor;
            },
            //下一张图片
            next_img(){
                if(this.img_count==this.img_array.length-1){
                    this.img_count=0
                }
                else{
                    this.img_count ++
                }
                // this.show_img=`img/${this.img_count}.png`

                this.show_img=this.img_array[this.img_count].src
            },

            //上一张图片
            up_img(){
                if(this.img_count==0){
                    this.img_count=this.img_array.length-1
                }
                else{
                    this.img_count --
                }
                // this.show_img=`img/${this.img_count}.png`

                this.show_img=this.img_array[this.img_count].src
            },
            
            //选中图片
            find_img(index){
                this.img_count = index
                this.show_img=`img/${index+1}.png`
            },

            //关闭图片自动轮播
            closeTimer(){
                clearInterval(this.timer)
            },

            //开启图片自动轮播
            openTimer(){
                this.timer=setInterval(this.next_img,1000)
            }
        }
        
    });

    

</script>

</html>

图片轮播
图片轮播