Difference between revisions of "Jquery slideshow"
From KOP KB
| Line 1: | Line 1: | ||
| + | Main Disadvantage all images need to be the same dimensions. | ||
| + | |||
<syntaxhighlight lang="html4strict"> | <syntaxhighlight lang="html4strict"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
Revision as of 20:49, 12 January 2015
Main Disadvantage all images need to be the same dimensions.
<!DOCTYPE html>
<html>
<head>
<style>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slpic{
width: 240px;
height: 240px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 10000);
});
</script>
</head>
<body>
<div id="slideshow">
<div>
<img id="slpic" src="./grasss.jpg">
</div>
<div>
<img id="slpic" src="./mine.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
</body>
</html>
EXAMPLE
