You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
6.3 KiB
121 lines
6.3 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<meta name="description" content=""> |
|
<meta name="author" content="netmoose"> |
|
|
|
<title>Presentation on JQuery and Bootstrap</title> |
|
|
|
<!-- Bootstrap core CSS --> |
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> |
|
|
|
<!-- Custom styles for this template --> |
|
<link href="sticky-footer.css" rel="stylesheet"> |
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
|
<!--[if lt IE 9]> |
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
|
<![endif]--> |
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
|
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> |
|
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> |
|
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script> |
|
</head> |
|
|
|
<body> |
|
|
|
<!-- Begin page content --> |
|
<div class="container"> |
|
<div class="page-header"> |
|
<h1>Пример презентации</h1> |
|
</div> |
|
<div id="presentation"> |
|
<div> |
|
<strong>1</strong> |
|
<p><img src="image.png" class="image-left"></p> |
|
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, orci consectetur posuere efficitur, risus dolor vulputate |
|
nibh, ac venenatis mauris quam id elit. In non dapibus lectus, in placerat diam. Aenean finibus volutpat nibh, quis maximus augue bibendum |
|
eget. Cras euismod risus vitae risus consectetur, ac consectetur augue gravida. Etiam condimentum nulla sem, in venenatis quam consequat nec. |
|
Nam sed nulla felis. Duis in feugiat felis. Curabitur eget varius purus. In malesuada accumsan felis eu vehicula. Donec convallis mauris vel |
|
odio efficitur vestibulum.<p> |
|
</div> |
|
<div> |
|
<strong>2</strong> |
|
<p><img src="image.png" class="image-left"></p> |
|
<p class="lead">Sed non egestas tellus, a aliquet ex. Donec id velit in purus vehicula auctor id vel nulla. Cras molestie urna ac pellentesque rutrum. In |
|
at convallis dui, et sollicitudin lacus. Aenean purus quam, faucibus vel est at, efficitur euismod lacus. Ut consectetur maximus ligula, sed |
|
pellentesque lacus pretium ut. Suspendisse pellentesque ut tellus vitae facilisis. Cras auctor elit in dui tempus dictum. </p> |
|
</div> |
|
<div> |
|
<strong>3</strong> |
|
<p><img src="image.png" class="image-left"></p> |
|
<p class="lead">Praesent et risus lorem. Nullam massa eros, maximus et ipsum suscipit, mattis cursus metus. Vestibulum dapibus enim imperdiet dui ornare |
|
pharetra. Aenean pulvinar eros metus, semper maximus diam tincidunt in. Suspendisse fermentum mi at augue feugiat blandit imperdiet at quam. |
|
Pellentesque libero ligula, vulputate vitae sapien eu, dapibus tempor nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices |
|
posuere cubilia Curae; Sed pharetra dolor a elementum feugiat. Aliquam erat volutpat. Morbi volutpat cursus dapibus. Sed luctus nisi purus, |
|
id rutrum dui dignissim sit amet.</p> |
|
</div> |
|
<div> |
|
<strong>4</strong> |
|
<p><img src="image.png" class="image-left"></p> |
|
<p class="lead">Praesent est ipsum, lobortis sed sapien vel, pellentesque vestibulum nunc. Fusce rutrum ligula risus, eu maximus lacus fermentum nec. Cum |
|
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt in nunc sed feugiat. Sed non ex sed justo |
|
eleifend pulvinar non vel odio. Nunc ultricies ipsum in velit mattis euismod. Donec aliquet efficitur molestie. Nam a nulla consectetur, |
|
malesuada neque vel, mattis nisl. Suspendisse nibh ante, mattis non varius vel, sodales non ligula. Sed consequat eget neque vitae |
|
ullamcorper. Proin lobortis iaculis magna, sit amet dictum augue dignissim id. Vestibulum vestibulum massa ut leo aliquet, tempor varius quam |
|
ultricies. Sed molestie felis ac justo blandit, id pretium purus suscipit.</p> |
|
</div> |
|
<div> |
|
<strong>5</strong> |
|
<p><img src="image.png" class="image-left"></p> |
|
<p class="lead">Donec porta semper fringilla. Etiam ac orci tempor, euismod risus ac, posuere felis. Suspendisse congue, dui sed tempor hendrerit, diam orci |
|
malesuada dolor, ut placerat nisl neque quis odio. Vivamus gravida accumsan augue at semper. In hac habitasse platea dictumst. Mauris auctor |
|
dui a enim vulputate elementum. Morbi enim massa, ullamcorper maximus neque non, facilisis commodo turpis. Mauris ornare euismod rhoncus. |
|
Vivamus tincidunt tincidunt orci, non ultrices felis fermentum et. Praesent porttitor nunc a purus fermentum, congue faucibus dui laoreet. |
|
Vivamus efficitur sollicitudin lacus, ac ultricies orci eleifend eget. Nullam at odio et turpis accumsan sollicitudin. Etiam auctor sodales |
|
diam, at efficitur massa hendrerit vel.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<footer class="footer"> |
|
<div class="container"> |
|
<p class="text-muted"><center><a id="prev" href="#">Предыдущий слайд</a> | <a id="prespause" href="#">Пауза</a> | <a id="next" href="#">Следующий слайд</a></center></p> |
|
</div> |
|
</footer> |
|
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
|
<script type="text/javascript"> |
|
var run = 1; |
|
console.log('run = '+run); |
|
|
|
$.fn.cycle.defaults.timeout = 6000; |
|
$('#presentation').cycle({ |
|
fx: 'scrollLeft,scrollDown,scrollRight,scrollUp', |
|
delay: -1000, |
|
next: '#next', |
|
prev: '#prev' |
|
}); |
|
$('#prespause').click(function () { |
|
console.log('pause'); |
|
if(run == 1) { |
|
run = 0; |
|
console.log('run = '+ run); |
|
$('#presentation').cycle('pause'); |
|
$('#prespause').text('Запуск'); |
|
} |
|
else { |
|
run = 1; |
|
console.log('run = '+run); |
|
$('#presentation').cycle('resume'); |
|
$('#prespause').text('Пауза'); |
|
} |
|
return false; |
|
}); |
|
</script> |
|
</body> |
|
</html> |