<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#s5').cycle({ fx: 'scrollLeft', timeout: 5000, before: onBefore, after: onAfter });
});
function onBefore(){
$('#imgcontainer img').each(function () {
$(this).css('opacity', '0.5');
});
$('#imgcontainer').append("<img src="+this.src+" />");
}
function onAfter()
{
if (this.id=='5')
{
$('#s5').cycle('stop');
$('#imgcontainer').html('');
}
}
</script>
</script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
.display { width:300px; height:200px; border: 2px solid #000; }
.js .display { display:none; }
</style>
</head>
<body>
<div class="slideshow" id="s5">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" id="1" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" id="2" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" id="3" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" id="4" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" id="5" width="200" height="200" />
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="clear:both;" </div>
<div id="imgcontainer">
</div>
</body>
</html>
No comments:
Post a Comment