2 mint6 Mint6 于 2016.04.09 14:04 提问

如何加上个点击图片时自动播放音乐的功能

$(function(){

// Global variables that hold state

var page = 0,
    per_page = 100,
    photo_default_size = 150,
    picture_width = photo_default_size,
    picture_height = photo_default_size,
    max_w_photos, max_h_photos
    data = [];

// Global variables that cache selectors

var win = $(window),
    loading = $('#loading'),
    gallery = $('#gallery');

// Redraw the photos on screen
gallery.on('data-ready window-resized page-turned', function(event, direction){

    var cache = [],
        deferreds = [];

    gallery.trigger('loading');

    var set = [];
    for(var j = 1; j < 39;j++) { // 修改加载图片的数量
        set.push({"thumb":"images/photos/thumbs/" + j + ".jpg","large":"images/photos/large/" + j + ".jpg"});
    }

    $.each(set, function(){

        // Create a deferred for each image, so
        // we know when they are all loaded
        deferreds.push($.loadImage(this.thumb));

        // build the cache
        cache.push('<a href="' + this.large + '" class="swipebox"' +
                    'style="width:' + picture_width + 'px;height:' + picture_height + 'px;background-image:url(' + this.thumb + ')">'+
                    '</a>');
    });

    if(is_prev_page()){
        cache.unshift('<a class="prev" style="width:' + picture_width + 'px;height:' + picture_height + 'px;"></a>');
    }

    if(is_next_page()){
        cache.push('<a class="next" style="width:' + picture_width + 'px;height:' + picture_height + 'px;"></a>');
    }

    if(!cache.length){
        // There aren't any images
        return false;
    }

    // Call the $.when() function using apply, so that 
    // the deferreds array is passed as individual arguments.
    // $.when(arg1, arg2) is the same as $.when.apply($, [arg1, arg2])

    $.when.apply($, deferreds).always(function(){

        // All images have been loaded!

        if(event.type == 'window-resized'){

            // No need to animate the photos
            // if this is a resize event

            gallery.html(cache.join(''));
            show_photos_static();

            // Re-initialize the swipebox
            $('#gallery .swipebox').swipebox();

        }
        else{

            // Create a fade out effect
            gallery.fadeOut(function(){

                // Add the photos to the gallery
                gallery.html(cache.join(''));

                if(event.type == 'page-turned' && direction == 'br'){
                    show_photos_with_animation_br();
                }
                else{
                    show_photos_with_animation_tl();
                }

                // Re-initialize the swipebox
                $('#gallery .swipebox').swipebox();

                gallery.show();

            });
        }

        gallery.trigger('loading-finished');
    });

});


gallery.on('loading',function(){
    // show the preloader
    loading.show();
});

gallery.on('loading-finished',function(){
    // hide the preloader
    loading.hide();
});

gallery.on('click', '.next', function(){
    page++;
    gallery.trigger('page-turned',['br']);
});

gallery.on('click', '.prev', function(){
    page--;
    gallery.trigger('page-turned',['tl']);
});


// Monitor window resizing or changing device orientation
win.on('resize', function(e){

    var width = win.width(),
        height = win.height(),
        gallery_width, gallery_height,
        difference;

    // How many photos can we fit on one line?
    max_w_photos = Math.ceil(width/photo_default_size);

    // Difference holds how much we should shrink each of the photos
    difference = (max_w_photos * photo_default_size - width) / max_w_photos;

    // Set the global width variable of the pictures.
    picture_width = Math.ceil(photo_default_size - difference);

    // Set the gallery width
    gallery_width = max_w_photos * picture_width;

    // Let's do the same with the height:

    max_h_photos = Math.ceil(height/photo_default_size);
    difference = (max_h_photos * photo_default_size - height) / max_h_photos;
    picture_height = Math.ceil(photo_default_size - difference);
    gallery_height = max_h_photos * picture_height;

    // How many photos to show per page?
    per_page = max_w_photos*max_h_photos;

    // Resize the gallery holder
    gallery.width(gallery_width).height(gallery_height);

    gallery.trigger('window-resized');

}).resize();

function show_photos_static(){

    // Show the images without any animations
    gallery.find('a').addClass('static');

}

function show_photos_with_animation_tl(){

    // Animate the images from the top-left

    var photos = gallery.find('a');

    for(var i=0; i<max_w_photos + max_h_photos; i++){

        var j = i;

        // Loop through all the lines
        for(var l = 0; l < max_h_photos; l++){

            // If the photo is not of the current line, stop.
            if(j < l*max_w_photos) break;

            // Schedule a timeout. It is wrapped in an anonymous
            // function to preserve the value of the j variable

            (function(j){
                setTimeout(function(){
                    photos.eq(j).addClass('show');
                }, i*50);
            })(j);

            // Increment the counter so it points to the photo
            // to the left on the line below

            j += max_w_photos - 1;
        }
    }
}

function show_photos_with_animation_br(){

    // Animate the images from the bottom-right

    var photos = gallery.find('a');

    for(var i=0; i<max_w_photos + max_h_photos; i++){

        var j = per_page - i;


        // Loop through all the lines
        for(var l = max_h_photos-1; l >= 0; l--){

            // If the photo is not of the current line, stop.
            if(j > (l+1)*max_w_photos-1) break;

            // Schedule a timeout. It is wrapped in an anonymous
            // function to preserve the value of the j variable

            (function(j){
                setTimeout(function(){
                    photos.eq(j).addClass('show');
                }, i*50);
            })(j);

            // Decrement the counter so it points to the photo
            // to the right on the line above

            j -= max_w_photos - 1;
        }
    }
}

/* Helper functions */

function get_per_page(){

    // How many pictures should be shown on current page

    // The first page has only one arrow,
    // so we decrease the per_page argument with 1
    if(page == 0){
        return per_page - 1;
    }

    // Is this the last page?
    if(get_page_start() + per_page - 1 > data.length - 1){
        // It also has 1 arrow.
        return per_page - 1;
    }

    // The other pages have two arrows.
    return per_page - 2;
}

function get_page_start(p){

    // Which position holds the first photo
    // that is to be shown on the give page

    if(p === undefined){
        p = page;
    }

    if(p == 0){

        return 0;
    }

    // (per_page - 2) because the arrows take up two places for photos
    // + 1 at the end because the first page has only a next arrow.

    return (per_page - 2)*p + 1;
}

function is_next_page(){

    // Should we show the next arrow?

    return data.length > get_page_start(page + 1);

}

function is_prev_page(){

    // Should we show the previous arrow?

    return page > 0;
}

gallery.trigger('data-ready');

});

如何加上个点击图片时自动播放音乐的功能,就是这段代码该在哪里加,怎么加

1个回答

showbo
showbo   Ds   Rxr 2016.04.11 11:01
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
HTML+Javascript实现点击图片自动播放背景音乐
用HTML+Javascript实现点击图片自动播放背景音乐。精巧实用,值得参考!
点击同一图片,控制音乐开始、暂停
当点击图片时,添加CSS,图片开始进行旋转,同时歌曲开始播放。再次点击时,图片恢复原样,歌曲暂停。 代码如下: css部分.cover-play {-webkit-animation: turn 6s infinite linear;animation: turn 6s infinite linear;-o-animation: turn 6s infinite linear;} @keyfra
点击图片,背景音乐播放/停止,播放图标/静音图标随之更换
点击图片,背景音乐播放/停止,播放图标/静音图标随之更换
Android简单的实现音乐播放器功能(一个按钮可相应两个事件的方法)
可以通过点击开始音乐进行音乐播放button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { ((Button)v).setEnabled(false);//设置按钮不可用
如何在网页中实现音乐播放功能
在网页中实现音乐播放功能 Embed   (一)、基本语法:   embed src=url   说明:embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等,Netscape及新版的IE 都支持。   url为音频或视频文件及其路径,可以是相对路径或绝对路径。   示例:   (二)、属性设置:   1、自动播放:   语法:a
html页面加上背景音乐自动播放
0.基本配置音乐图片百度云链接 密码: 8e8e1.css内容&lt;style&gt; #audio_btn { position: fixed; right: 8px; top: 0; z-index: 200; display: none; w
点击按钮播放音乐
点击读题 function play2() { var player = document.getElementById('xqt'); if (isPlaying) { // 如果正在播放, 停止播放并停止读取此音乐文件 player.pause(); player.src = ''; } else { player.src = 'MP3/小蜻蜓.mp3'; pla
jplayer实现点击图片可以暂停播放的网页音乐播放器代码
今天给网友做了一个音乐播放器,他需要的功能是点击图片可以播放和暂停音乐,现在分享给大家。 转载请注明出处 原文链接:http://www.bcty365.com/content-94-477-1.html
在web上播放音乐
  "Filename with full URL"——待播放文件的文件名,前面带上绝对路径,或者本站的相对路径。        width_num——指定一个作为宽度的数字;        height_num——指定一个作为高度的数字;1.mid src="Filename with full URL" type="audio/midi" hidden="false" autostart=
手机web端页面加载时自动播放背景音乐
在pc端上直接在body里写个video就可以了,很简单 但是移动端不一样,移动端禁用所有的自动播放音乐,必须手动触发,但是我们可以巧妙绕过这个设定 1、在html上新建个容器,其实不要也可以,我只是喜欢规范点 2、用js加载页面时把video元素append进去就行了,我还额外做了一个浏览器每次打开只会播放一次的功能,不然每次用户选择该页面都会播放用户难免烦躁