<!DOCTYPE HTML>
02
<html>
03
<body>
04
<script src="http://code.jquery.com/jquery-latest.js"></script>
05
<script>
06
07
$(function(){
08
09
// скроем изображдения в начале
10
$("#imgs img").hide();
11
12
// выберем первое изображение как стартовое
13
var select= $("#imgs img:eq(0)");
14
15
//покажем первую картинку
16
select.show();
17
18
// вместо кнопок использую само изобюражения
19
$("#imgs img").click(function(){
20
21
//скроем текущее изображение
22
select.hide();
23
24
//выберем следующее изображение
25
select=select.next();
26
27
//если следующего изображения нет (ну нету, кончились они
), тогда выберем вновь первое изображение
28
if (select.attr("src")==undefined){select=$("#imgs img:eq(0)");};
29
30
//покажем вновь выбранное изображение.
31
select.show();
32
});
33
});
34
</script>
35
36
<div id="imgs" align="left">
37
<img width="200px" src="http://img-fotki.yandex.ru/get/5013/78967976.57/0_822f5_e013c42f_XL" />
38
<img width="200px" src="http://demotivatorsblog.ru/uploads/www.demotivations.infon2p4qmmzm5mz.jpg" />
39
<img width="200px" src="http://www.radionetplus.ru/uploads/posts/1317536159_demotivatory__402.jpg"/>
40
<img width="200px" src="http://demotivatorbi.ru/s/t/big/tbc0oz3f60nk6.jpg"/>
41
<img width="200px" src="http://s41.radikal.ru/i094/1005/4a/18e7f2b3f3c3.jpg"/>
42
<img width="200px" src="http://kotomatrix.ru/images/lolz/2009/10/19/381110.jpg"/>
43
<img width="200px" src="http://best-dem.ru/wp-content/uploads/2010/10/x_410f4ef9-%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F.jpg"/>
44
45
46
</div>
47
48
49
</body>
50
</html>
