54 lines
1.1 KiB
HTML
54 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
||
|
|
<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
<script src="js/jquery.bxSlider/jquery.easing.1.3.js"></script>
|
||
|
|
<script src="js/jquery.bxSlider/jquery.bxSlider.min.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" type="text/css" media="all" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
#animation {
|
||
|
|
width: 300px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bx-captions {
|
||
|
|
font-family: sans-serif;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="animation">
|
||
|
|
<ul id="frames">
|
||
|
|
<li><img title="This is the first frame" src="animation/img1.png">
|
||
|
|
<li><img title="This is the second frame" src="animation/img2.png">
|
||
|
|
<li><img title="This is the third frame" src="animation/img3.png">
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="slider"></div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var anim = $('#frames').bxSlider({
|
||
|
|
controls: false,
|
||
|
|
mode: 'fade',
|
||
|
|
speed: 100,
|
||
|
|
captions: true
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$("#slider" ).slider({
|
||
|
|
value: 0,
|
||
|
|
min: 0,
|
||
|
|
max: 2,
|
||
|
|
step: 1,
|
||
|
|
slide: function( event, ui ) {
|
||
|
|
anim.goToSlide(ui.value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|