fade in fade out image for html

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">.slideshow{height:232px;width:232px;margin:auto}.slideshow img{padding:15px;border:1px solid #ccc;background-color:#eee}</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">$(document).ready(function(){$('.slideshow').cycle({fx:'fade'});});</script>
</head>
<body>
    <div class="slideshow">
        <img src="s1.png" width="200" height="200"/>
        <img src="s2.png" width="200" height="200"/>
        <img src="s3.png" width="200" height="200"/>
        <img src="s4.png" width="200" height="200"/>
        <img src="s6.png" width="200" height="200"/>
    </div>
</body>
</html>