8

JS代码

function music_box(){

      var url=new Array();

      var name=new Array();

      var num = 0;

      var _this = this;

      this.init = function(){

           jQuery("#music").fadeIn("slow");

           if(name.length == 0){



              jQuery("#file").find("dl").each(function(){

                     url.push(jQuery(this).html());

                 });

             jQuery("#file").find("dd").each(function(){

                     name.push(jQuery(this).html());

                 });

                 this.createMusicBox();

        }

        else{

        

            jQuery("#musiclist").fadeIn("slow");

            jQuery("#musicbox").fadeIn("slow");

            document.getElementById("music_audio").play();

        }

    }

    

    this.createMusicBox = function(){

        

        jQuery("#musiclist").html("");

        jQuery("#musicbox").html("");

        if(name.length != 0){

                    var html="<ul>";

                    for(var i=0;i < name.length;i++){

                        

                        if(i==num)

                            html += "<li class='chose_music'><a href='#' class='choose' onclick='music.choose("+ i +")'>" + name[i] + "<img src='"+ website + "/images/os/del.gif' onclick='music.del("+ i +")' href='#' class='music_del'></li>";

                        else

                            html += "<li><a href='#' class='choose' onclick='music.choose("+ i +")'>" + name[i] + "</a><img src='"+ website + "/images/os/del.gif' onclick='music.del("+ i +")' href='#' class='music_del'></li>";

                    }

                }

        var music_box = "<audio autoplay='true' id='music_audio' controls='true' onended='music.next()'><source src="+url[num]+"/>您的浏览器不支持html5</audio>";

        jQuery("#musiclist").html(html);

        jQuery("#musicbox").html(music_box);

    }

    

    this.choose = function(i){

        num = i;

        this.createMusicBox();

    }

    

    this.next = function(){

        num++;

        if(num > name.length-1){

            num = 0;

        }

        

        this.createMusicBox();

    }

    

    this.close = function(post){

        jQuery("#musiclist").fadeOut("slow");

        jQuery("#musicbox").fadeOut("slow");

        jQuery("#music").fadeOut("slow");

        if(post != 'hide'){

            document.getElementById("music_audio").pause();

            

        }

    }

    

    this.chooseOne = function(music_name,music_url){

        url.push(music_url);

        name.push(music_name);

        this.createMusicBox();

    }

    

    this.hideMusicList = function(){

        jQuery("#musiclist").toggle("slow");

    }

    

    this.del = function(i){

        document.getElementById("music_audio").pause();

        name.splice(i,1);

        url.splice(i,1);

        this.createMusicBox();

        

    }

    this.clear = function(){

        document.getElementById("music_audio").pause();

        name = [];

        url = [];

        this.createMusicBox();

    }

 }

<div id="music">

                <img onclick='music.close()' style="float:right;cursor:pointer;" src="<? echo $website ?>/images/os/del.gif"/>

                <div id="musicbox">

                </div>

                <div id="musicbutton">

                    <button onclick='music.next()'>Next</button>

                    <button onclick='music.hideMusicList()'>List</button>

                    <button onclick="music.close('hide')">Hide</button>

                    <button onclick="music.clear()">Clear</button>

                </div>

                <div class="clear"></div>

                <div id="musiclist">

                </div>

            </div>

            

            <div id="dropbox"></div>