-------------------------------------------------------------
<script src="http://http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function swapImages(){
var $active = $('#Gallery .active');
var $next = ($('#Gallery .active').next().length > 0) ? $('#Gallery .active').next() : $('#Gallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
<style>
#Gallery{
position:relative;
width:400px; /*image width */
height:300px; /*image height */
}
#Gallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#Gallery img.active{
display:block;
}
</style>
<div id="Gallery">
<img src="one.jpg" class="active" />
<img src="two.jpg" />
<img src="three.jpg" />
</div>
--------------------------------------------------------------
<script src="http://http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function swapImages(){
var $active = $('#Gallery .active');
var $next = ($('#Gallery .active').next().length > 0) ? $('#Gallery .active').next() : $('#Gallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
<style>
#Gallery{
position:relative;
width:400px; /*image width */
height:300px; /*image height */
}
#Gallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#Gallery img.active{
display:block;
}
</style>
<div id="Gallery">
<img src="one.jpg" class="active" />
<img src="two.jpg" />
<img src="three.jpg" />
</div>
--------------------------------------------------------------
No comments:
Post a Comment