Here is a simple implementation of an image slideshow using the jQuery application at http://www.serie3.info/s3slider/
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#s3slider
{
width:240px;
height:180px;
position:relative;
overflow:hidden;
}
#s3sliderContent
{
width:240px;
position: absolute;
bottom:0;
margin-left:0;
list-style:none;
}
.s3sliderImage
{
float:left;
position:relative;
display: none;
}
.s3sliderImage span
{
position: absolute;
left:0;
width:240px;
background-color:#000000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
color:#FFFFFF;
display:none;
bottom:0;
}
.clear
{
clear: both;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script>
$(document).ready(function()
{
$('#s3slider').s3Slider(
{
timeOut:4000
});
});
</script>
</head>
<body>
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
</body>
</html>
No comments:
Post a Comment