jQuery - Slideshow.js
Slideshow.js là một plugin jQuery để triển khai trình chiếu hình ảnh hoặc video vào trang web của bạn một cách nhanh chóng và dễ dàng.
Một ví dụ về trình chiếu đơn giản như được hiển thị bên dưới -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "https://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8" />
<link rel = "stylesheet" href = "css/supersized.css" type = "text/css"
media = "screen" />
<link rel = "stylesheet" href = "theme/supersized.shutter.css"
type = "text/css" media = "screen" />
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type = "text/javascript" src =" js/jquery.easing.min.js"></script>
<script type = "text/javascript" src =" js/supersized.3.2.7.min.js"></script>
<script type = "text/javascript" src = "theme/supersized.shutter.min.js"></script>
<script type = "text/javascript">
jQuery(function($){
$.supersized({
slideshow : 1,
autoplay : 1,
start_slide : 1,
stop_loop : 0,
random : 0,
slide_interval : 3000,
transition : 6,
transition_speed : 1000,
new_window : 1,
pause_hover : 0,
keyboard_nav : 1,
performance : 1,
image_protect : 1,
min_width : 0,
min_height : 0,
vertical_center : 1,
horizontal_center : 1,
fit_always : 0,
fit_portrait : 1,
fit_landscape : 0,
slide_links : 'blank',
thumb_links : 1,
thumbnail_navigation : 0,
slides :
[
{
image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg',
title : 'Sample demo',
thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg',
url : 'https://www.tutorialspoint.com'
},
{
image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg',
title : 'Sample demo',
thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg',
url : 'https://www.tutorialspoint.com'
},
{
image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg',
title : 'Sample demo',
thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg',
url : 'https://www.tutorialspoint.com'
},
{
image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg',
title : 'Sample demo',
thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg',
url : 'https://www.tutorialspoint.com'
},
{
image : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg',
title : 'Sample demo',
thumb : 'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg',
url : 'https://www.tutorialspoint.com'},
],
progress_bar : 1,
mouse_scrub : 0
});
});
</script>
</head>
<style type = "text/css">
ul#demo-block{ margin:0 15px 15px 15px; }
ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline;
float:left; clear:both; color:#aaa; background:url('img/bg-black.png');
font:11px Helvetica, Arial, sans-serif; }
ul#demo-block li a{ color:#eee; font-weight:bold; }
</style>
<body>
<div id = "prevthumb"></div>
<div id = "nextthumb"></div>
<a id = "prevslide" class = "load-item"></a>
<a id = "nextslide" class = "load-item"></a>
<div id = "thumb-tray" class = "load-item">
<div id = "thumb-back"></div>
<div id = "thumb-forward"></div>
</div>
<div id = "progress-back" class = "load-item">
<div id = "progress-bar"></div>
</div>
<div id = "controls-wrapper" class = "load-item">
<div id = "controls">
<a id = "play-button"><img id = "pauseplay" src = "img/pause.png"/></a>
<div id = "slidecounter">
<span class = "slidenumber"></span> / <span class = "totalslides"></span>
</div>
<div id = "slidecaption"></div>
<a id = "tray-button"><img id = "tray-arrow" src = "img/button-tray-up.png"/></a>
<ul id = "slide-list"></ul>
</div>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bấm vào đây