Fullscreen Video Slideshow with BigVideo.js



Đầu tiên, chúng ta hãy đánh dấu cho trang:

Chúng tôi sẽ làm trên trung tâm của màn hình, chúng tôi có một div wrapper có chứa tất cả các màn hình khác nhau. Sau đó, có một nút chúng tôi sẽ sử dụng để di chuyển giữa các màn hình.

<header> <h1>Fullscreen Video Slideshow <span>with BigVideo.js</span></h1> <p>The videos in this demo are from <a href="http://beachfrontprod.blogspot.com" target="_blank">Beachfront B-Roll</a>, a great place to download unique HD stock video footage and animated backgrounds for any production purpose (for free!).</p> <p><small>A demo for</small> <a href="http://dfcb.github.com/BigVideo.js/" target="_blank">BigVideo.js</a> <small>by <a href="http://twitter.com/johnpolacek" target="_blank" rel="author">@johnpolacek</a></small></p></header> <div class="wrapper"> <div class="screen" id="screen-1" data-video="vid/bird.mp4"> <img src="img/bird.jpg" class="big-image" /> <h1 class="video-title">#1 Bird</h1> </div> <div class="screen" id="screen-2" data-video="vid/satellite.mp4"> <img src="img/satellite.jpg" class="big-image" /> <h1 class="video-title">#2 Satellite</h1> </div> <div class="screen" id="screen-3" data-video="vid/camera.mp4"> <img src="img/camera.jpg" class="big-image" /> <h1 class="video-title">#3 Camera</h1> </div> <div class="screen" id="screen-4" data-video="vid/spider.mp4"> <img src="img/spider.jpg" class="big-image" /> <h1 class="video-title">#4 Spider</h1> </div> <div class="screen" id="screen-5" data-video="vid/dandelion.mp4"> <img src="img/dandelion.jpg" class="big-image" /> <h1 class="video-title">#5 Dandelion</h1> </div></div> <nav id="next-btn"> <a href="#" class="next-icon"></a></nav>

BẠN SẼ QUAN TÂM

Honda Small RS Concept mới thực sự là một chiếc hatchback "dễ mến"

Xe cộ / Tin Ô tô 20-04-2018, 15:21

Honda đang thực hiện theo chiến lược tương tự với mẫu Brio hiện tại, khi Honda Small Concept được ra mắt vào năm 2010,.

Những tác phẩm xuất sắc giành chiến thắng cuộc thi Nikon Small World Photomicrography 2017

Công nghệ 10-10-2017, 11:05

Small World Photomicrography là cuộc thi thường niên được Nikon tổ chức trong suốt 43 năm qua. Với chủ đề là những bức.

ZTE ra mắt Small Fresh 5 giá rẻ nhưng có camera kép, RAM 4 GB, chạy Android 7.0

Công nghệ / Điện thoại 23-06-2017, 08:55

Theo trang GSMArena, chiếc smartphone ZTE mới này trang bị chip Snapdragon 425 với bốn nhân. Màn hình hiển thị IPS 5.

Youtube - LEARN COLORS with Small CARS on Truck in Spiderman Cartoon for Kids Learn Numbers & Color Video

Media 3-03-2017, 22:47

Xu Hướng Youtube - Learn colors with cars on trucknnnOther funny videos:nnMcQueen Mack.

ZTE ra mắt Small Fresh 4 với màn hình 5.2”, camera 13MP

Công nghệ / Điện thoại 18-07-2016, 11:46

Là sản phẩm kế nhiệm của chiếc điện thoại Small Fresh 3 ra mắt hồi năm ngoái, Small Fresh 4 sở hữu nhiều cái tiến đáng.

ZTE ra mắt Small Fresh 4: 5.2 inch full HD, chip lõi 8, giá 3.7 triệu

Công nghệ / Điện thoại 17-07-2016, 14:03

Tiếp nối dòng sản phẩm Small Fresh 3 được trình làng vào năm ngoái, hôm nay (17/7) ZTE đã giới thiệu chiếc smartphone.

Màn hình tương tác lớn và nhỏ của Microsoft trong tương lai.

Công nghệ / Máy tính 4-03-2013, 04:15

Màn hình lớn và nhỏ tương tác. Đó là tầm nhìn về một sự kết hợp trong tương lai của Microsoft.Bề mặt tương tác khổng lồ.

Photo Booth Strips with Lightbox

Thủ thuật / Mã nguồn 16-09-2012, 03:05

Băng ảnh đứng đẹp mắt với Lightbox 2 di chuyển bằng cách lăn bi với phong cách lạ với 'Photo Booth Strips with Lightbox'.

ĐỪNG BỎ LỠ