Tuesday, January 15, 2013

jquery slider image show one by one end of show then all thumbain image blank


<!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