<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Simple Fade In Fade Out</title>
</head>
<style type="text/css">
.slideshow {
overflow: hidden;
width: 400px;
height: 260px;
background-color: #000;
margin: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript">
var count = 1;
setInterval(function() {
count = (jQuery(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
jQuery(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);
</script>
<body>
<div class="slideshow">
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+01" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+02" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+03" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+04" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+05" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+06" />
</div>
</body>
</html>
Categories: Php Mysql Ajax Jquery JavaScript Mysql
0 Comments