Difference between revisions of "Jquery slideshow"
From KOP KB
(→EXAMPLE) |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| + | |||
Main Disadvantage all images need to be the same dimensions. | Main Disadvantage all images need to be the same dimensions. | ||
| + | == EXAMPLE == | ||
| + | <html> | ||
| + | <iframe frameBorder="0" src="https://knightsofprocrastination.ca/slideshow.html" width="400px" height="450px"> | ||
| + | </iframe> | ||
| + | </html> | ||
| + | |||
| + | == CODE == | ||
<syntaxhighlight lang="html4strict"> | <syntaxhighlight lang="html4strict"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Line 31: | Line 39: | ||
$(function() { | $(function() { | ||
| − | + | $("#slideshow > div:gt(0)").hide(); | |
| − | + | ||
| − | + | setInterval(function() { | |
| − | + | $('#slideshow > div:first') | |
| − | + | .fadeOut(1000) | |
| − | + | .next() | |
| − | + | .fadeIn(1000) | |
| − | + | .end() | |
| − | + | .appendTo('#slideshow'); | |
| − | + | }, 10000); | |
| − | + | }); | |
| − | |||
</script> | </script> | ||
</head> | </head> | ||
| Line 60: | Line 67: | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Latest revision as of 00:04, 11 December 2015
Main Disadvantage all images need to be the same dimensions.
EXAMPLE
CODE
<!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>
