html设置幻灯片铺满全屏_全屏幻灯片，带有HTML5音频和jQuery

html设置幻灯片铺满全屏

View demo 查看演示 Download Source 下载源

In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

在今天的教程中，我们将创建一个全屏照片幻灯片，以说明纽约的图片系列。 我们将使用HTML5音频元素添加声音，以使画廊栩栩如生，并尝试重新创建这座充满活力的城市的环境。

To create the slideshow and the fullscreen picture display, we’ll use the Vegas jQuery plugin that compiles many ideas previously shared in Codrops articles in one plugin. The audio elements will be controlled with Buzz, a JavaScript audio library. You can find out more about these two plugins that I wrote on my website: Jay Salvat’s website.

为了创建幻灯片和全屏图片显示，我们将使用Vegas jQuery插件，该插件将以前在Codrops文章中共享的许多想法汇总在一个插件中。 音频元素将通过JavaScript音频库Buzz进行控制。 您可以在我的网站上找到有关这两个插件的更多信息： Jay Salvat的网站。

The thumbnails navigation will be spiced up with a custom scrollbar using jScrollPane by Kelvin Luck and some easing effects provided by the jQuery easing plugin by George McGinley Smith.

缩略图导航将使用Kelvin Luck的jScrollPane和自定义滚动条进行增补，以及George McGinley Smith的jQuery缓动插件提供的缓动效果。

The New York photography is by Alessandro Artini, check out his photos on his Flickr photostream.

纽约摄影是亚历山德罗•阿蒂尼( Alessandro Artini)拍摄的，在他的Flickr照片流上可以查看他的照片。

标记 (The Markup)

Let’s set the stage! First we create a placeholder to contain the picture title and credits.

让我们做好准备！ 首先，我们创建一个占位符以包含图片标题和字幕。

<div id="title">
    <h1>New York Gallery</h1>
    <p>Pictures by <a href="http://www.flickr.com/">Alessandro Artini</a></p>
</div>

Then the thumbnails are placed in an unordered list. Each thumbnail is linked to a big representation of the picture and carry the title of the picture. Note that we add a data attribute to some links to adjust the vertical alignment of the displayed fullscreen picture to avoid cropping an important part.

然后将缩略图放置在无序列表中。 每个缩略图都链接到图片的较大表示，并带有图片标题。 请注意，我们在某些链接中添加了data属性，以调整显示的全屏图片的垂直对齐，从而避免裁剪重要部分。

Two empty divs are added to hold the pointer and the flash effect when the slides change.

添加两个空的div来保存指针和幻灯片更改时的闪光效果。

<div id="flash"></div>
<div id="thumbnails">
  <ul>
    <li>
      <a href="01.jpg">
        <img src="01b.jpg" title="New York moving" data-valign="top">
      </a>
    </li>
    <li>
      <a href="02.jpg">
        <img src="02b.jpg" title="New York traffic" data-valign="bottom">
      </a>
    </li>
    <li>
      <a href="03.jpg">
        <img src="03b.jpg" title="Street dancers">
      </a>
    </li>
    ...
    </ul>
    <div id="pointer"></div>
</div>

Finally, we place the links for the pause and volume management.

最后，我们放置用于暂停和音量管理的链接。

<div id="pause"><a href="#">Paused</a></div>

<div id="volume"><a href="#">Sounds</a></div>

CSS (The CSS)

First, we’ll define the style of the title part which is placed at the bottom of the screen with a black background. We use the “rgba” notation which allow us to set the opacity of the color. Note that we prepend it by the standard hex notation #000 for older browsers.

首先，我们将定义标题部分的样式，该标题部分放置在屏幕底部并带有黑色背景。 我们使用“ rgba”符号来设置颜色的不透明度。 请注意，对于较旧的浏览器，我们在其前面添加了标准十六进制表示法＃000。

The heading will be in the nice Ultra font from the Google fonts collection:

标题将采用Google字体集合中漂亮的Ultra字体：

#title {
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    bottom: 0px;
    font: 11px Arial, Helvetica, sans-serif;
    padding: 10px 20px;
    position: fixed;
    right: 0px;
    text-align: right;
    width: 100%;
}
    #title h1 {
        font: 30px 'Ultra', Arial, serif;
        margin: 0;
        padding: 0;
    }

We’ll follow the same technique for the thumbnails. The elements of the list are floated to display the pictures as an horizontal bar.

我们将对缩略图采用相同的技术。 列表中的元素将浮动以将图片显示为水平条。

#thumbnails {
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    height: 90px;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}
    #thumbnails ul {
        margin: 0;
        padding: 0;
    }
    #thumbnails li {
        float: left;
        list-style: none;
        margin: 5px;
        padding: 0;
    }
    #thumbnails a {
        outline: none;
    }
    #thumbnails img {
        width: 112px;
    }

The pointer is placed out of the page. It will be animated at the beginning of the slideshow and moved under the currently displayed slide.

指针被放置在页面之外。 它将在幻灯片开始时进行动画处理，并在当前显示的幻灯片下移动。

#pointer {
    border: 2px solid #F30;
    cursor: pointer;
    height: 75px;
    left: -100px;
    margin: 3px;
    position: absolute;
    width: 112px;
}

The flash effect is done with a pure white div fixed over the whole screen. By default it is hidden. It will be shown and faded out dynamically.

闪光效果是通过将纯白色div固定在整个屏幕上来完成的。 默认情况下它是隐藏的。 它会被显示并动态消失。

#flash {
    background: #FFF;
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
}

The same idea holds for the pause text. It is hidden by default.

暂停文本也是如此。 默认情况下它是隐藏的。

#pause {
    display: none;
    font: 100px 'Ultra', arial, serif;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    text-align: center;
    text-shadow: 0 0 5px #000;
    width: 100%;
}
    #pause a {
        color: #FFF;
        height: 100px;
        left: 50%;
        margin: -50px 0 0 -250px;
        position: absolute;
        text-transform: uppercase;
        top: 50%;
        width: 500px;
    }

For the volume links we’ll use some nice icons. The volume button has three states defined by three classes showing different icons. We use the CSS sprites technique to reduce the number of png files loaded. Read more about the CSS image replacement and CSS sprites technique on Css-tricks.

对于音量链接，我们将使用一些漂亮的图标。 音量按钮具有三个状态，由三个类别定义，分别显示不同的图标。 我们使用CSS Sprites技术减少加载的png文件数量。 阅读有关Css-tricks上的CSS图像替换和CSS Sprites技术的更多信息。

#volume {
    left: 10px;
    opacity: 0.8;
    position: absolute;
    top: 100px;
}
    #volume a {
    	background: transparent url(../img/icons.png) no-repeat;
    	display: block;
    	height: 30px;
    	text-indent: -9999px;
    	width: 30px;
    }
    #volume.all a {
        background-position: 0 0;
    }
    #volume.some a {
        background-position: -30px 0;
    }
    #volume.none a {
        background-position: -60px 0;
    }

Finally, we’ll customize some Vegas default styles to adjust the overlay pattern and the position of the loading indicator.

最后，我们将自定义一些Vegas默认样式，以调整覆盖图案和加载指示器的位置。

.vegas-loading {
    top: auto;
    bottom: 40px;
    left: 40px;
}
.vegas-overlay {
    background-image: url(../js/vegas/overlays/02.png);
}

And we’ll also make some adjustments to the jScrollPane default styles in order to get a nice scrollbar fitting our gallery.

而且，我们还将对jScrollPane的默认样式进行一些调整，以获得适合我们画廊的漂亮滚动条。

.jspHorizontalBar {
    height: 5px;
}
    .jspHorizontalBar .jspTrack {
         background: #333;
    }
    .jspHorizontalBar .jspDrag {
         background: #666;
         cursor: ew-resize;
    }
#thumbnails:hover .jspHorizontalBar .jspDrag {
    background: #F30;
}

JavaScript (The JavaScript)

We are reaching the main part: the JavaScript. Let’s start by caching some elements. The picture array will hold all the slides and their title and vertical alignment.

我们正在达到主要部分：JavaScript。 让我们从缓存一些元素开始。 图片数组将保存所有幻灯片及其标题和垂直对齐。

var pictures = [],
    $pointer = $( '#pointer' ),
    $thumbnails = $( '#thumbnails' ),
    $title = $( '#title' ),
    $pause = $( '#pause' ),
    $flash = $( '#flash' ),
    $volume = $( '#volume' );

It’s time to define the sounds of our gallery with Buzz. The HTML5 audio element is now supported by all modern browsers. Sounds are supported in a native way without the need for Flash. Unfortunately, there is not a single audio format supported by all of them. MP3 would have been a good choice, but Firefox doesn’t support it. We have to convert our sounds to several formats. The best combination is OGG and MP3 formats. To convert our audio elements we used the free online file converter Online Convert.

现在该用Buzz定义我们画廊的声音了。 所有现代浏览器现在都支持HTML5音频元素。 声音的本地支持，而无需Flash。 不幸的是，它们都不支持单一的音频格​​式。 MP3本来是个不错的选择，但Firefox不支持。 我们必须将声音转换为多种格式。 最佳组合是OGG和MP3格式。 为了转换音频元素，我们使用了免费的在线文件转换器Online Convert 。

Buzz allows us to group sounds in order to easily control them. This is what we do with all the camera sounds.

嗡嗡声使我们可以对声音进行分组，以便轻松控制它们。 这就是我们处理所有相机声音的方法。

If the user’s browser doesn’t support the HTML5 audio element, Buzz degrades properly. In that case, we’ll simply hide the volume button.

如果用户的浏览器不支持HTML5音频元素，则Buzz会正常降级。 在这种情况下，我们只需隐藏音量按钮。

The traffic sound is played and looped as soon as it is loaded.

交通声音在加载后即被播放并循环播放。

buzz.defaults.formats = [ 'ogg', 'mp3' ];

var trafficSound = new buzz.sound( 'sounds/traffic' ),
    clickSound = new buzz.sound( 'sounds/click' ),
    focusSound = new buzz.sound( 'sounds/focus' ),
    rewindSound = new buzz.sound( 'sounds/rewind' ),
    cameraSounds = new buzz.group( clickSound, focusSound, rewindSound );

if ( !buzz.isSupported() ) {
    $volume.hide();
}

trafficSound.loop().play().fadeIn( 5000 );

Now, let’s work on our thumbnails. We have to adjust the total width of the thumbnails bar. Without this step, the thumbnails would be display in more than one row.

现在，让我们来制作缩略图。 我们必须调整缩略图栏的总宽度。 没有此步骤，缩略图将显示在多行中。

$thumbnails.find( 'ul' ).width( function() {
    var totalWidth = 0;
    $( this ).find( 'li' ).each( function() {
        totalWidth += $( this ).outerWidth( true );
    });
    return totalWidth;
});

We’ll now apply jScrollPane to the thumbnails container. jScrollPane provides an easy way to work with its API. We use that in order to render a proper scrollbar when the window is resized. This API will be useful in a further step.

现在，我们将jScrollPane应用于缩略图容器。 jScrollPane提供了一种使用其API的简便方法。 我们使用它来在调整窗口大小时呈现正确的滚动条。 此API在下一步中将很有用。

$thumbnails.jScrollPane();

var jScrollPaneApi = $thumbnails.data( 'jsp' );

$( window ).bind( 'resize', function() {
    jScrollPaneApi.reinitialise();
});

Now, the Vegas plugin needs to be set. We’ll fill the picture array by grabbing some information from the thumbnails list and pass it to Vegas in order to start the slideshow. A four second delay is applied between the slides.

现在，需要设置Vegas插件。 我们将通过从缩略图列表中获取一些信息来填充图片阵列，并将其传递给Vegas以开始幻灯片放映。 幻灯片之间施加了四秒钟的延迟。

$thumbnails.find( 'a' ).each( function() {
    pictures.push({
        src: $( this ).attr( 'href' ),
        title: $( this ).find( 'img' ).attr( 'title' ),
        valign: $( this ).find( 'img' ).data( 'valign' )
    });
})

$.vegas( 'slideshow', {
    backgrounds: pictures,
    delay: 4000
 })( 'overlay' );

Vegas triggers a bunch of events. The one we need now is the onload event trigger when a slide is loaded and displayed. With the src attribute of the loaded image, we’ll get the number of the currently active thumbnail. Also, a sound is played.

拉斯维加斯引发了一系列事件。 我们现在需要的是加载和显示幻灯片时的onload事件触发器。 使用已加载图像的src属性，我们将获得当前活动缩略图的编号。 此外，还会播放声音。

$( 'body' ).bind( 'vegasload', function( e, img ) {
    var src = $( img ).attr( 'src' ),
        idx = $( 'a[href="' + src + '"]' ).parent( 'li' ).index();

    focusSound.play();

    // ...
});

The title is modified in order to hold the picture title and is displayed with a nice fade-out/fade-in effect.

标题经过修改以保留图片标题，并以淡入/淡入效果显示。

    $title.fadeOut( function() {
        $( this ).find( 'h1' ).text( pictures[ idx ].title );
        $( this ).fadeIn();
    });

The flash is fired…

闪光灯被闪光…

    $flash.show().fadeOut( 1000 );

The pointer has to move over the current thumbnail. The jScrollPane API is used to automatically scroll the bar as the pointer is off the screen, but not if the user hovers over the bar.

指针必须在当前缩略图上移动。 jScrollPane API用于在指针离开屏幕时自动滚动条，但如果用户将鼠标悬停在条上则不会使用。

    var pointerPosition = $thumbnails.find( 'li' ).eq( idx ).position().left;

    $pointer.animate({
        left: pointerPosition
    }, 500, 'easeInOutBack' );

    if ( ( pointerPosition > $thumbnails.width()
        || pointerPosition < jScrollPaneApi.getContentPositionX() )
        && !$thumbnails.is( ':hover' ) ) {
            jScrollPaneApi.scrollToX( pointerPosition, true );
    }

    $pointer.click( function() {
        $thumbnails.find( 'a' ).eq( idx ).click()
    });

Let’s see what we have to do with our volume button. The idea is to mute or unmute some sounds as the button is clicked. We change the class of the button and set the muting or playing of the sounds accordingly.

让我们看看我们与音量按钮有什么关系。 这个想法是在单击按钮时使某些声音静音或取消静音。 我们更改按钮的类别，并相应地设置声音的静音或播放。

$volume.click( function() {
    if ( $( this ).hasClass( 'all' ) ) {
        cameraSounds.unmute();
        trafficSound.mute();

        $( this ).removeClass( 'all' ).addClass( 'some' );
    } else if ( $( this ).hasClass( 'some' ) ) {
        cameraSounds.mute();
        trafficSound.mute();

        $( this ).removeClass( 'some' ).addClass( 'none' );
    } else {
        cameraSounds.unmute();
        trafficSound.unmute();

        $( this ).removeClass( 'none' ).addClass( 'all' );
    }
    return false;
});

Our gallery is almost set. Now we want that clicking a thumbnail displays a new slide and pauses the slideshow. Its cursor is set to the current number of the clicked thumbnail. That way the slideshow will restart at the right position. All the elements of the page are hidden and we display a “paused” message.

我们的画廊快要摆好了。 现在，我们希望单击缩略图以显示新幻灯片并暂停幻灯片放映。 其光标设置为单击的缩略图的当前编号。 这样，幻灯片将在正确的位置重新开始。 页面的所有元素都被隐藏，我们显示“已暂停”消息。

Another sound is played.

播放另一种声音。

$thumbnails.find( 'a' ).click( function() {
    $pause.show();
    $pointer.hide();

    $volume.animate( { top: '20px' });
    $thumbnails.animate( { top: '-90px' });
    $title.animate( { bottom: '-90px' });    

    var idx = $( this ).parent( 'li' ).index();
    $.vegas( 'slideshow', { step: idx } )( 'pause' );

    rewindSound.play();

    return false;
});

A click on the “paused” word restarts the slideshow and the thumbnails and title are shown again.

单击“已暂停”一词将重新开始幻灯片放映，并且缩略图和标题将再次显示。

$pause.click( function() {
    $pause.hide();
    $pointer.show();

    $volume.animate( { top:'100px' });
    $title.animate( { bottom:'0px' });
    $thumbnails.animate( { top:'0px' });

    $.vegas( 'slideshow' );

    clickSound.play();

    return false;
});

That’s it! We hope you enjoyed the tutorial of mashing up some plugins and like the noisy result!

而已！ 我们希望您喜欢混搭一些插件的教程，并且喜欢嘈杂的结果！

翻译自: https://tympanus.net/codrops/2011/07/05/fullscreen-slideshow-with-html5-audio/

html设置幻灯片铺满全屏