在網站制作中,相冊是非常常見的元素之一。使用HTML5代碼制作相冊可以非常簡單,而且還可以免費獲得源代碼。
要制作HTML5相冊,首先需要一個HTML結構。以下是基本的HTML5相冊結構:
<div class="album"> <div class="photos"> <img src="photo1.jpg" alt="photo1"> <img src="photo2.jpg" alt="photo2"> <img src="photo3.jpg" alt="photo3"> </div> <div class="thumbnails"> <img src="photo1.jpg" alt="thumbnail1"> <img src="photo2.jpg" alt="thumbnail2"> <img src="photo3.jpg" alt="thumbnail3"> </div> </div>
上面的HTML結構包括一個class為“album”的div,其中包括一個class為“photos”的子div和一個class為“thumbnails”的子div。photos div包含實際的照片,而thumbnails div則包含每張照片的縮略圖。
下面是一個基本的CSS樣式表,可以對相冊進行美化:
.album { width: 100%; overflow: hidden; } .photos { float: left; width: 70%; } .photos img { display: block; float: left; margin-right: 10px; margin-bottom: 10px; max-width: 100%; height: auto; } .thumbnails { float: left; width: 30%; background: #eee; } .thumbnails img { display: block; float: left; margin-right: 10px; margin-bottom: 10px; width: 100%; height: auto; }
上面的CSS樣式表為相冊提供了一些基本的樣式,包括將album div變為一個自適應的容器,使photos div和thumbnails div并排呈現,以及為照片和縮略圖提供邊距和自適應大小。
最后,可以添加一些JavaScript代碼,以增強相冊的功能。以下是一個JavaScript庫,可以為相冊提供基本的操作和特效:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script> <script> $(document).ready(function() { var pswpElement = document.querySelectorAll('.pswp')[0]; var photos = []; $('.photos img').each(function() { var src = $(this).attr('src'); var w = $(this).data('width'); var h = $(this).data('height'); photos.push({ src: src, w: w, h: h }); }); $('.photos').on('click', 'img', function() { var index = $(this).index(); var options = { index: index, shareEl: false }; var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, photos, options); gallery.init(); }); }); </script>
上面的JavaScript代碼使用了PhotoSwipe庫,來提供相冊的點擊放大功能。其中,通過獲取每張照片的寬度和高度,來保證放大后的照片能夠正確顯示。
最后,這就是一份完整的HTML5相冊代碼。通過上面的代碼,可以輕松制作出一個非常漂亮的相冊,并且完全免費!
上一篇html5直播怎么設置
下一篇html5石頭剪刀布代碼