добавить кнопку next&last
есть код
function next(arr) {
var max = arr.length - 1,
i = -1;
return function () {
i = i < max ? i + 1 : 0;
return arr[i];
};
}
jQuery(function () {
var slider = next($('#start>div.go'));
var curent;
setInterval(function () {
if (curent) $(curent).hide();
curent = slider();
$(curent).show();
}, 3000);
});
по очереди меняет видимость 3х div.go по циклу 3000ms мне бы хотелось бы сделать два дива .last & .next по клику на который бы происходило действие отображающее предыдущий div.go считаю от того div.go который сейчас виден. Ну если проще то кнопка назад и вперед. и Все. Помогите дописать код пожалуйста! |
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>
|
спасибо, второй год уже в основном только ты и помогаешь :)
|
| Часовой пояс GMT +3, время: 10:48. |