ufaclub,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.go {
display: none;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font: 5em bold;
color: #FFFFFF;
}
.go:nth-child(2) {
background: #FFCC00;
display: block;
}
.go:nth-child(3) {
background: #009900;
}
.go:nth-child(4) {
background: #0066FF;
}
.prev, .next{
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function() {
var slider = next($('#start>div.go'));
var curent = $('#start>div.go:first');
function next(arr) {
var max = arr.length - 1,
i = 0;
return function(direction) {
direction ? i-- : i++;
i > max && (i = 0);
i < 0 && (i = max);
return arr[i];
};
}
function show(direction) {
$(curent).hide();
curent = slider(direction);
$(curent).show();
}
// setInterval(show, 3000);
var s = $(".prev, .next");
s.click(function() {
show($(this).is('.prev'))
});
});
</script>
</head>
<body>
<div id='start'>
<div class='prev'>prev</div>
<div class='go'>1</div>
<div class='go'>2</div>
<div class='go'>3</div>
<div class='next'>next</div>
</div>
</body>
</html>