Как по клику на див загнать в переменную названия дива

@svoy_man · Регистрация: 01.11.2012

Студворк — интернет-сервис помощи студентам

Не пойму, почему слайдер работает не так как надо(((

У меня задача состоит в следующем:
1)Есть 4 дива
2)в первом диве выводится контент
3)второй, третий и четвертый с помощью css прячут контент
4)по нажатию на второй див, он становитса на место первого
5)а первый становится на место четвертого, а четвертый на место третьего, а третий на место второго, получается такое смещения

Что у меня получилось:
1)смешения происходит но не так как хотелось
2)по нажатию на второй слайд подгружается четвертый
3)и там такая каша и дальше варится, происходит что то непонятное

вот код:
html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Rotating Blocks</title>
    <link rel='stylesheet' href='css/style.css'>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
    <script type="text/javascript" src="rotator.js"></script>
</head>
 
<body>
<div id="rotator">
    <div id="block-1" class="slaid1">
        <h2>Слайд1</h1>
            <div>
                <h1>Слайд1</h1>
                <img src="spacefrog.jpg" alt="space frog">
                <p>Commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>
    </div>
    <div id="block-2" class="slaid2">
        <h2>Слайд2</h2>
            <div>
                <h1>Слайд2</h1>
                <img src="goblins.jpg" alt="goblins">
                <p>Ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>          
    </div>
    <div id="block-3" class="slaid3">
        <h2>Слайд3</h2>
            <div>
                <h1>Слайд3</h1>
                <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>          
    </div>
    <div id="block-4" class="slaid4">
        <h2>Слайд4</h2>
            <div>
                <h1>Слайд4</h1>
                <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>          
    </div>
</div>
    
</body>
 
</html>

css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
* { 
    margin:0; 
    padding:0; 
}
html {
    background:#fff3c9;
}
body {
    font:14px/1.4 Georgia, serif;
    color:#2d2d2d;
}
h1 {
    font:bold 36px Helvetica, Arail, Sans-Serif;
    letter-spacing: -1px;
}
h1, p {
    margin: 0 0 20px 0;
}
#rotator {
    width:920px;
    height:600px;
    position:relative;
    background:white;
    padding:20px;
}
#block-1{
    background:#d5fcff;
}
#block-2{
    background:#e1ffd5;
}
#block-3{
    background:#ffffd8;
}
#block-4{
    background:#ffcccc;
}
#rotator > div {
    position: absolute;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#rotator > div > div {
    padding:20px;
}
#rotator > div > div img {
    float:right;
    margin:0 0 2px 10px;
}
#rotator .slaid1 {
    top:20px;
    left:20px;
    width:580px;
    height:430px;
}
#rotator .slaid2 {
    top:20px;
    left:620px;
    height:130px;
    width:320px;
}
#rotator .slaid3 {
    top:170px;
    left:620px;
    height:130px;
    width:320px;
}
#rotator .slaid4 {
    top:320px;
    left:620px;
    height:130px;
    width:320px;
}
#rotator .slaid2:hover, #rotator .slaid3:hover, #rotator .slaid4:hover {
    cursor: pointer;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
#rotator h2 {
    text-align: center;
    line-height: 130px;
}
#rotator .slaid1 h2 {
    display: none;
}

javascript

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(function() {
    var current;
    function rotate() {
        if (current == 1){
            $("#block-1").removeClass().addClass("slaid1");
            $("#block-2").removeClass().addClass("slaid2");
            $("#block-3").removeClass().addClass("slaid3");
            $("#block-4").removeClass().addClass("slaid4");
        }else if(current == 2){
            $("#block-1").removeClass().addClass("slaid2");
            $("#block-2").removeClass().addClass("slaid3");
            $("#block-3").removeClass().addClass("slaid4");
            $("#block-4").removeClass().addClass("slaid1");
        }else if(current == 3){
            $("#block-1").removeClass().addClass("slaid3");
            $("#block-2").removeClass().addClass("slaid4");
            $("#block-3").removeClass().addClass("slaid1");
            $("#block-4").removeClass().addClass("slaid2");
        }else if(current == 4){
            $("#block-1").removeClass().addClass("slaid4");
            $("#block-2").removeClass().addClass("slaid1");
            $("#block-3").removeClass().addClass("slaid2");
            $("#block-4").removeClass().addClass("slaid3");
        }
            
    }
    $("#rotator div").click(function(){
        current = this.id.substr(6);
        rotate();
    });
});

Не пойму вроде бы все правильно, я из дива #rotator выбираю все вложенные дивы это #block-1, #block-2, #block-3, #block-4 потом в javascript за каждым кликом в переменную current = this.id.substr(6); загоняю последний символ ид, получаются 1,2,3,4 и потом проверю условия, если цифра 1 то делать то, и так далее...... ничего не получается ПОМОГИТЕ ПЛИЗ)

@Soldado · 04.12.2012, 15:35

Смотрим код: Вы кликаете по второму диву, загоняете в переменную цифру "2", затем в строке 9 проверяете условие:

JavaScript
1
else if(current == 2)

и если да, то почему-то присваеваете в строке 13 четвёртому блоку главную позицию на сайте-slide1:

JavaScript
1
$("#block-4").removeClass().addClass("slaid1");

Вы просто запутались в присвоении классов. Я так понял Вы хотите, чтобы блоки располагались, как бы по кругу -цепочкой вот так (кодировка на народе -1251):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(function() {
    var current;
    function rotate() {
        if (current == 1){
            $("#block-1").removeClass().addClass("slaid1");
            $("#block-2").removeClass().addClass("slaid2");
            $("#block-3").removeClass().addClass("slaid3");
            $("#block-4").removeClass().addClass("slaid4");
        }else if(current == 2){
            $("#block-1").removeClass().addClass("slaid4");
            $("#block-2").removeClass().addClass("slaid1");
            $("#block-3").removeClass().addClass("slaid2");
            $("#block-4").removeClass().addClass("slaid3");
        }else if(current == 3){
            $("#block-1").removeClass().addClass("slaid3");
            $("#block-2").removeClass().addClass("slaid4");
            $("#block-3").removeClass().addClass("slaid1");
            $("#block-4").removeClass().addClass("slaid2");
        }else if(current == 4){
            $("#block-1").removeClass().addClass("slaid2");
            $("#block-2").removeClass().addClass("slaid3");
            $("#block-3").removeClass().addClass("slaid4");
            $("#block-4").removeClass().addClass("slaid1");
        }
            
    }
    $("#rotator div").click(function(){
        current = this.id.substr(6);
               rotate();
    });
});

@svoy_man · 04.12.2012, 20:26 **[ТС]**

А я ДЕБИЛ

, просто было 03:00 утра, вот и натупил, спасибо!!! Второй раз меня выручили)

Добавлено через 1 час 47 минут
Возник еще один вопрос, как сделать чтоб они менялись автоматически?

@Soldado · 04.12.2012, 21:21

Можно rotate(), запускать периодически через setInterval, самому меняя значение curent - увеличивая его каждый раз на единицу, а если это значение становится равным 5, то снова сбрасывать его в единицу и так бесконечно.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(function() {
 var i=1;
    var current;
    function rotate() {
        if (current == 1){
            $("#block-1").removeClass().addClass("slaid1");
            $("#block-2").removeClass().addClass("slaid2");
            $("#block-3").removeClass().addClass("slaid3");
            $("#block-4").removeClass().addClass("slaid4");
        }else if(current == 2){
            $("#block-1").removeClass().addClass("slaid4");
            $("#block-2").removeClass().addClass("slaid1");
            $("#block-3").removeClass().addClass("slaid2");
            $("#block-4").removeClass().addClass("slaid3");
        }else if(current == 3){
            $("#block-1").removeClass().addClass("slaid3");
            $("#block-2").removeClass().addClass("slaid4");
            $("#block-3").removeClass().addClass("slaid1");
            $("#block-4").removeClass().addClass("slaid2");
        }else if(current == 4){
            $("#block-1").removeClass().addClass("slaid2");
            $("#block-2").removeClass().addClass("slaid3");
            $("#block-3").removeClass().addClass("slaid4");
            $("#block-4").removeClass().addClass("slaid1");
        }
            
    }
    
setInterval(function(){
current = i;
rotate();
i++;
if(i==5){i=1}
},3000); //интервал 3 секунды
 
});

Демо-страница

@svoy_man · 04.12.2012, 23:00 **[ТС]**

А можно сделать так, идет автоматическая смена слайдов, и по нажатию на слайд он делается активным и автоматическая смена останавливается? просто в Ваше примере, просто идет автоматическа смена и все, есле я хочу посмотреть 4 слайд мне придется ждать очереди

@Soldado · 05.12.2012, 11:29

Можно совместить оба варианта в один - демо-страница

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(function() {
 var i=1;
    var current;
    function rotate() {
        if (current == 1){
            $("#block-1").removeClass().addClass("slaid1");
            $("#block-2").removeClass().addClass("slaid2");
            $("#block-3").removeClass().addClass("slaid3");
            $("#block-4").removeClass().addClass("slaid4");
        }else if(current == 2){
            $("#block-1").removeClass().addClass("slaid4");
            $("#block-2").removeClass().addClass("slaid1");
            $("#block-3").removeClass().addClass("slaid2");
            $("#block-4").removeClass().addClass("slaid3");
        }else if(current == 3){
            $("#block-1").removeClass().addClass("slaid3");
            $("#block-2").removeClass().addClass("slaid4");
            $("#block-3").removeClass().addClass("slaid1");
            $("#block-4").removeClass().addClass("slaid2");
        }else if(current == 4){
            $("#block-1").removeClass().addClass("slaid2");
            $("#block-2").removeClass().addClass("slaid3");
            $("#block-3").removeClass().addClass("slaid4");
            $("#block-4").removeClass().addClass("slaid1");
        }
            
    }
    
var stopSI = setInterval(function(){
current = i;
rotate();
i++;
if(i==5){i=1}
},3000); 
            
$("#rotator div").click(function(){
clearInterval(stopSI);
        current = this.id.substr(6);
               rotate();
    });
});

Ещё исправьте ошибку в html-коде, в строке 14:

HTML5
1
<h2>Слайд1</h1>

Закрыть нужно тоже h2.

@svoy_man · 05.12.2012, 15:52 **[ТС]**

Спасибо, ошибку еще вчера исправил))

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@svoy_man 16 / 16 / 3 Регистрация: 01.11.2012 Сообщений: 55
	04.12.2012, 20:26 [ТС]
	А я ДЕБИЛ, просто было 03:00 утра, вот и натупил, спасибо!!! Второй раз меня выручили) Добавлено через 1 час 47 минут Возник еще один вопрос, как сделать чтоб они менялись автоматически? 0

@svoy_man 16 / 16 / 3 Регистрация: 01.11.2012 Сообщений: 55
	04.12.2012, 23:00 [ТС]
	А можно сделать так, идет автоматическая смена слайдов, и по нажатию на слайд он делается активным и автоматическая смена останавливается? просто в Ваше примере, просто идет автоматическа смена и все, есле я хочу посмотреть 4 слайд мне придется ждать очереди 0

@svoy_man 16 / 16 / 3 Регистрация: 01.11.2012 Сообщений: 55
	05.12.2012, 15:52 [ТС]
	Спасибо, ошибку еще вчера исправил)) 0