10款精美的HTML5圖片輪播動畫+打包源碼下載

今天要給大家分享10款精美的HTML5圖片輪播/切換動畫，這些動畫每一個都有自己的特點，不管你是PC端的網頁，還是移動端的H5應用，都可以嘗試使用這些動畫來提高應用的用戶體驗。

?
PS：請你耐心看完，文末我提供了所有動畫的源碼打包下載鏈接，如果你喜歡這些動畫，可以按需下載，希望對你有所幫助。

1. 可無限水平滑動的JS畫廊動畫

這是一個簡約而實用的JS畫廊相冊組件，它的特點是可以添加無限多張相片，并且支持水平無限循環滑動。另外它還支持對畫廊中的相片進行展開和折疊，并同時動態展示相片的標題和描述。這款相冊組件主要采用了jQuery插件以及CSS3的過渡動畫特性，使用起來十分方便。

2. 基于TweenMax.js的圖片碎裂切換動畫

這是一個基于TweenMax動畫庫的圖片碎裂切換動畫，它的特點是點擊圖片時，圖片就會像玻璃那樣碎裂成許多塊，然后漸漸地消失，直到下一張圖片顯示為止。這款圖片碎裂動畫也可以應用在焦點圖的切換動畫中，效果非常不錯。

3. 基于Swiper.js的視差效果圖片滑塊動畫

Swiper.js是一個流行的移動端輪播圖插件，它提供了豐富的功能和配置項。這款圖片滑塊動畫就是基于Swiper.js實現的，它的特點是圖片切換的時候，圖片上方將會出現白色背景的視差效果圖層，并且它可以適配不同的瀏覽器尺寸。

4. 基于Three.js的圖片撕碎切換動畫

這又是一個非常酷的HTML5 Canvas圖片切換動畫，它是基于知名3D動畫庫threejs實現的。在圖片切換過程中，你也可以通過鼠標拖動來查看切換時的具體細節效果。如果將它制作成一個效果非常獨特而華麗的相冊或者焦點圖插件，相信會很不錯的。

5. CSS濾鏡特效下的手風琴圖片切換動畫

這是一個純CSS實現的手風琴特效的圖片切換動畫，它的特點是采用了CSS濾鏡特效，首先將原圖通過濾鏡變換成黑白樣式，鼠標滑過激活圖片后，再將黑白圖轉換成原圖，從而實現圖片高亮的效果。

6. jQuery手風琴圖片播放器可自動播放

這同樣是一款手風琴特效的圖片切換動畫，它基于jQuery開發，是一款非常不錯的jQuery圖片輪播插件。它的特點是支持自動播放，使用簡單，對于一些商品展示的站點或者app，比較適合使用。

7. HTML5 SVG實現的波浪切換圖片動畫

這是一款采用SVG遮罩來實現波浪樣式的圖片切換動畫。所有的圖片采用背景圖片的方式，圖片上方定義SVG圓形路徑，通過對圓形svg路徑的樣式渲染，實現波浪切換的動畫效果。

8. 基于jQuery的3D圖片切換插件Slicebox

Slicebox是一款基于jQuery的圖片切換插件，盡管jQuery在新的web系統中使用越來越少，但我們依然可以使用它的強大插件來豐富我們現有的網站。這款圖片切換插件的特點是播放上一張或下一張圖片時，圖片會出現水平分裂或垂直分裂的3D視覺效果。

9. jQuery響應式圖片切換插件，可自動播放

這款jQuery圖片切換插件擁有簡單的使用方法和靈活的擴展方式，支持單頁面多實例，并且可適配不同的屏幕尺寸。另外通過配置，我們可以讓圖片切換組件支持自動播放、顯示切換按鈕、鼠標滑過放大圖片等特性。

10. 純CSS實現的水平3D圖片滾動特效

這是一款純CSS實現的圖片滾動特效，它的特點是我們可以通過滾動瀏覽器的橫向滾動條，可以讓圖片進行水平切換滾動。另外圖片排列呈現3D投影的視覺效果，同時也可以在移動端通過手指滑動來實現圖片的橫向滾動瀏覽。

HTML5簡介:

定義：HTML5號稱下一代HTML，html的最新版本，定義了新的標簽、css、JavaScript，html5新標簽IE9以上版本瀏覽器才兼容，因此在實際開發中要問老板是否兼容低版本瀏覽器。

擴展內容：語義化標簽、本地儲存、兼容特性、2D 3D、動畫過渡、CSS3新特性、性能與集成

HTML5常用新標簽：

HTML5標簽多為語義化標簽，主要是針對瀏覽器搜索引擎，IE9瀏覽器中主要將所有語義化標簽都轉化為塊級元素，語義化標簽在移動端支持比較好，后面會有更多語義化標簽學習。

HTML5常用新標簽：

datalist選項輸入框:

此標簽和input標簽搭配可以實現input輸入提示，注意：input標簽中必須要有list屬性，其值綁定的是datalist的id值，option標簽中的value值不能為空，否則此功能失效。

    <body>
        <input type="text" value="輸入科目" list="lis" >
        <datalist id='lis'>
        <option value="科目1"></option>
        <option value="科目2"></option>
        <option value="科目3"></option>
        <option value="科目4"></option>
        </datalist>
    </body>

fieldset表單元素分組:

此標簽和legend標簽搭配可以將表單內相關元素分組（外部用一個矩形的方框包裹）


    <body>
      <fieldset>
        <legend>用戶信息</legend>    <!-- 矩形框邊插入的文本信息,去掉此標簽則為 封閉的矩形 -->
        <input type="text" value="user"><br>
        <input type="password" value="password">
      </fieldset>
    </body>

html5中input標簽的type屬性新增屬性值：

input中新增屬性：

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯系本人咨詢：

QQ：810665436

微信：ConstancyMan

多媒體標簽:

音頻標簽audio:

    <audio src="音頻文件的URL"></audio><!-- audio標簽需要controls控件才可以播放音頻，controls的屬性值可以省略，如果URL為視頻格式文件，則只會播放音頻 -->

html5中通過audio標簽實現音頻播放，支持的格式有.mp3/.ogg/.wav;注意：標簽中必須要有controls屬性，否則不會播放;loop循環播放，autoplay自動播放屬性（谷歌為了用戶體驗禁用了這個功能）;一般為了兼容多個瀏覽器，audio標簽中不寫src屬性，而是通過source標簽寫入多個格式的音頻供瀏覽器選擇，若都不支持則輸入提示文字：


    <body>
      <audio controls loop autoplay>
        <source src="music/bgsound.mp3" type="audio/mpeg">
        <source src="music/movie04.ogg" type="audio/mpeg">
          若瀏覽器都不支持以上格式，在這里輸入提示文字即可
      </audio>
    </body>

視頻標簽video:


    <video src="視頻文件的URL" controls="controls"></video><!-- video標簽需要controls控件才可以播放視頻，controls的屬性值可以省略 -->

視頻一般比較大，如果是一般的視頻上傳，我們可以借助第三方視頻平臺，如騰訊、優酷等，把視頻上傳到第三方平臺后分享，通過ifram標簽插入到代碼中即可。

embed可以用來插入各種多媒體，例如Midi、Wav、AIFF、AU、MP3等格式，它支持音頻或視頻播放


    <embed src="" allowFullScreen="true" quality="high" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

html5中定義視頻通過video標簽，其屬性：autoplay自動播放（谷歌為了用戶體驗禁用了這個功能,解決方法是給video標簽加靜音屬性muted）、muted靜音、controls默認播放控件、loop循環播放、poster加載等待的圖片、preload是否預先加載，其屬性值auto和none、width設置播放窗口的寬度、height設置播放窗口的高度，支持的格式有ogg/MPEG4/WebM等,一般video標簽中不寫src屬性，而是通過source標簽寫入多個格式的視頻供瀏覽器選擇，若都不支持則輸入提示文字：


    <body>
      <video controls loop autoplay poster="images/bg.jpg">
        <source src="video/movie04.ogg" type="video/ogg">
        <source src="video/mp4.mp4" type="video/mp4">
          若瀏覽器都不支持以上格式，在這里輸入提示文字即可
        </video>
    </body>

全屏方法：

HTML5允許用戶自定義網頁上任意一元素全屏顯示，element.requsetFullScreen()開啟全屏顯示；

同樣支持關閉全屏操作：document.cancelFullScreen()，注意：任何元素的全屏操作后都只需要給document關閉全屏即可。

document.fullScreen檢測當前是否處于全屏狀態。

以上方法不支持ie9以下低版本瀏覽器，以及高級瀏覽器加私有前綴才可以使用（webkit內核瀏覽器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome瀏覽器。Gecko內核瀏覽器：mozRequestFullScreen、mozCancelFullScreen，如火狐瀏覽器；document.webkitIsFullScreen、document.mozFullScreen）


        <script>
            var btn = document.querySelector('input');
            var flag = true;
            if (flag) {
                btn.onclick = function() {
                    bodys.webkitRequestFullScreen();
                    !flag;
                };
            } else {
                btn.onclick = function() {
                    document.webkitCancelFullScreen();
                    !flag;
                };
            };
        </script>

自定義播放器：

播放器中常用方法：

播放器中常用屬性：

繼：

播放器中常用事件：

解決html5標簽兼容性:

由于html5新增的許多語義化標簽在低版本瀏覽器不兼容，這里推薦一款js插件來解決這個問題：html5shiv.js，其相關教程查閱官網：https://www.npmjs.com/package/html5shiv