Difference between revisions of "Jquery slideshow"
From KOP KB
(→EXAMPLE) |
|||
| Line 60: | Line 60: | ||
== EXAMPLE == | == EXAMPLE == | ||
<html> | <html> | ||
| − | <iframe src="http://knightsofprocrastination.ca/slideshow.html" width="300px" height=" | + | <iframe src="http://knightsofprocrastination.ca/slideshow.html" width="300px" height="350px"> |
</iframe> | </iframe> | ||
</html> | </html> | ||
Revision as of 20:46, 12 January 2015
<!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
