Надо доработать навигацию jquery слайдера

@dima-f1 · Регистрация: 29.02.2012

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

Собираюсь поставить у себя на сайте слайдер контента. С яваскриптом не дружу. Нашел в интернете один, поему мнению, простенький jquery скрипт, но его надо немного модифицировать.
Вот, архив со скриптом slide.zip
Надо сделать так, чтобы навигация осуществлялась по ссылкам “Назад” и “Вперед”, а цифры остались только для индикации положения слайдера и были без ссылок.
Вот, 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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />               
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="slide.js"></script>     
        <title>Слайдер</title>               
        <style>         
            #block {
                width: 688px;
                height: 200px;
                overflow: hidden;
                margin: 50px auto 20px auto;
                border: 4px solid #175B53;
            }       
            #slider {
                position:relative;
            }
            .slider_content {
                width: 150px;
                height: 154px;
                margin: 10px 10px;
                line-height: 154px;
                border: 1px solid #557EEF;
                float: left;
                position: relative;
                text-align: center;
            }
            .inslider a {
                text-decoration:none;
            }
            .contentholder {
                height: 200px; 
                width: 172px;
                overflow: visible;
                position: relative;
            }
            .contentslider {
                position: absolute;
                top: 10px; 
                left: 0;
            }
            .contentnav {
                text-align: center;
            }
            .contentnav a {
                text-decoration: none;
                background-color: #D1FFD2;
                padding: 0 7px;
            }
            .contentnav a.active {
                background-color: #FFEE7E;
            }
            .other_nav {
                text-align: center;
            }
        </style>        
    </head>
 
    <body>
    
        <div id='block'>
            <!-- Контент слайдера -->
            <div class="contentholder">                 
                <div class="contentslider">                 
                    <div class="slider_content">
                        Какой то текст 1
                    </div>                      
                    <div class="slider_content">
                        Какой то текст 2
                    </div>                  
                    <div class="slider_content">
                        Какой то текст 3
                    </div>
                    <div class="slider_content">
                        Какой то текст 4
                    </div>                      
                    <div class="slider_content">
                        Какой то текст 5
                    </div>                  
                    <div class="slider_content">
                        Какой то текст 6
                    </div>
                    <div class="slider_content">
                        Какой то текст 7
                    </div>                  
                    <div class="slider_content">
                        Какой то текст 8
                    </div>
                </div>                      
            </div>
        </div>
        
        <!-- Навигация слайдера -->
        <div class="contentnav">
            <a rel="1" href="#">1</a>
            <a rel="2" href="#">2</a>
            <a rel="3" href="#">3</a>
            <a rel="4" href="#">4</a>
            <a rel="5" href="#">5</a>
        </div>
        
        <div class="other_nav"> <a href="#">Назад<a/> <a href="#">Вперед<a/> </div>
        
    </body> 
</html>

Вот, текст jquery скрипта:

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
42
43
44
45
46
47
48
49
50
$(document).ready(function() {
//Активизируем первую ссылку
$(".contentnav a:first").addClass("active");
//Ширина площади одной страницы
var contentwidth = $(".contentholder").width();
//Обще количество страниц
var totalcontent = $(".slider_content").size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth = contentwidth * totalcontent;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(".contentslider").css({'width' : allcontentwidth});
//Теперь пишем новую функцию для проскальзывания и навигации
rotate = function(){
//Количество раз, на которое надо прокрутить контент
var slideid = $active.attr("rel") - 1;
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance = slideid * contentwidth;
//Удаляем активный класс
$(".contentnav a").removeClass('active');
//Добавляем активный класс
$active.addClass('active');
//Анимация проскальзывания
$(".contentslider").animate({
        left: -slidedistance
    }, 700 );
}; 
 
//Устанавливаем время для проведения проскальзывания
rotation = function(){
play = setInterval(function(){
//Навигация следующего слайда
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 15000);
};
//Запускаем функцию вращения
rotation();
$(".contentnav a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});

Пожалуйста помогите мне решить эту задачу!

@suharik · 01.03.2012, 13:36

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$(document).ready(function() {
$(".contentnav a").click(function() {
return false;
}
//Активизируем первую ссылку
$(".contentnav a:first").addClass("active");
//Ширина площади одной страницы
var contentwidth = $(".contentholder").width();
//Обще количество страниц
var totalcontent = $(".slider_content").size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth = contentwidth * totalcontent;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(".contentslider").css({'width' : allcontentwidth});
//Теперь пишем новую функцию для проскальзывания и навигации
 
rotate = function(){
//Количество раз, на которое надо прокрутить контент
var param = $active.attr("rel");
if (param =="prev"){
var slideid = $('.contentnav a.active').attr("rel") - 1;
}else{
var slideid = $('.contentnav a.active').attr("rel") + 1;
}
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance = slideid * contentwidth;
//Удаляем активный класс
$(".contentnav a").removeClass('active');
//Добавляем активный класс
$active.addClass('active');
//Анимация проскальзывания
$(".contentslider").animate({
        left: -slidedistance
    }, 700 );
}; 
 
//Устанавливаем время для проведения проскальзывания
rotation = function(){
play = setInterval(function(){
//Навигация следующего слайда
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 15000);
};
 
//Запускаем функцию вращения
rotation();
$(".other_nav a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});

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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />                           
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
                <script type="text/javascript" src="slide.js"></script>         
                <title>Слайдер</title>                          
                <style>                 
                        #block {
                                width: 688px;
                                height: 200px;
                                overflow: hidden;
                                margin: 50px auto 20px auto;
                                border: 4px solid #175B53;
                        }               
                        #slider {
                                position:relative;
                        }
                        .slider_content {
                                width: 150px;
                                height: 154px;
                                margin: 10px 10px;
                                line-height: 154px;
                                border: 1px solid #557EEF;
                                float: left;
                                position: relative;
                                text-align: center;
                        }
                        .inslider a {
                                text-decoration:none;
                        }
                        .contentholder {
                                height: 200px; 
                                width: 172px;
                                overflow: visible;
                                position: relative;
                        }
                        .contentslider {
                                position: absolute;
                                top: 10px; 
                                left: 0;
                        }
                        .contentnav {
                                text-align: center;
                        }
                        .contentnav a {
                                text-decoration: none;
                                background-color: #D1FFD2;
                                padding: 0 7px;
                        }
                        .contentnav a.active {
                                background-color: #FFEE7E;
                        }
                        .other_nav {
                                text-align: center;
                        }
                </style>                
        </head>
 
        <body>
        
                <div id='block'>
                        <!-- Контент слайдера -->
                        <div class="contentholder">                                     
                                <div class="contentslider">                                     
                                        <div class="slider_content">
                                                Какой то текст 1
                                        </div>                                          
                                        <div class="slider_content">
                                                Какой то текст 2
                                        </div>                                  
                                        <div class="slider_content">
                                                Какой то текст 3
                                        </div>
                                        <div class="slider_content">
                                                Какой то текст 4
                                        </div>                                          
                                        <div class="slider_content">
                                                Какой то текст 5
                                        </div>                                  
                                        <div class="slider_content">
                                                Какой то текст 6
                                        </div>
                                        <div class="slider_content">
                                                Какой то текст 7
                                        </div>                                  
                                        <div class="slider_content">
                                                Какой то текст 8
                                        </div>
                                </div>                                          
                        </div>
                </div>
                
                <!-- Навигация слайдера -->
                <div class="contentnav">
                        <a rel="1" href="#">1</a>
                        <a rel="2" href="#">2</a>
                        <a rel="3" href="#">3</a>
                        <a rel="4" href="#">4</a>
                        <a rel="5" href="#">5</a>
                </div>
                
                <div class="other_nav"> <a href="#" rel="prev">Назад<a/> <a href="#" rel="next">Вперед<a/> </div>
                
        </body> 
</html>

Попробуй так, что он скажет я просто не проверял.

@dima-f1 · 02.03.2012, 00:37 **[ТС]**

Начало есть, но работает неправильно

Раньше было:
Демонстрация до внесенных изменений
Теперь:
Демонстрация после внесенных изменений

@suharik · 02.03.2012, 10:27

Эх, придется себе ставить на комп) Сейчас ггляну

@dima-f1 · 02.03.2012, 10:58 **[ТС]**

О, давай, давай!!!
Только там в html разметке надо подправить неправильные закрывающиеся теги ссылок:
С:

HTML5
1
<div class="other_nav"> <a href="#" rel="prev">Назад<a/> <a href="#" rel="next">Вперед<a/> </div>

На:

HTML5
1
<div class="other_nav"> <a href="#" rel="prev">Назад</a> <a href="#" rel="next">Вперед</a> </div>

А в вашем доработаном яваскрипте я так понял не хватает скобки с точкой с запятой после }

JavaScript
1
2
3
$(".contentnav a").click(function() {
return false;
}

Вторая демонстрация была сделана с этими поправками:

Начало есть, но работает неправильно

Раньше было:
Демонстрация до внесенных изменений
Теперь:
Демонстрация после внесенных изменений

@suharik · 02.03.2012, 12:45

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
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
$(document).ready(function() {
$(".contentnav a").click(function() {
return false;
});
//Активизируем первую ссылку
$(".contentnav a:first").addClass("active");
//Ширина площади одной страницы
var contentwidth = $(".contentholder").width();
//Обще количество страниц
var totalcontent = $(".slider_content").size();
//Общая ширина всего контента (всех страниц)
var allcontentwidth = contentwidth * totalcontent;
//Проскальзывание контента устанавливаем на ширину, которую получили выше
$(".contentslider").css({'width' : allcontentwidth});
//Теперь пишем новую функцию для проскальзывания и навигации
rotate = function(param){
 
/*if (param =="click"){
 var rota = $q.attr('rel');
 if(rota="next"){
var slideid = $('.contentnav a.active').attr("rel");
slideid = + slideid+1;
}else{
var slideid = $('.contentnav a.active').attr("rel");
slideid =  slideid-1;
}
}else{*/
var slideid = $active.attr("rel") - 1;
//}
//Количество раз, на которое надо прокрутить контент
//var slideid = $active.attr("rel") - 1;
//Устанавливаем дистанцию, на которую происходит единичная прокрутка
var slidedistance = slideid * contentwidth;
//Удаляем активный класс
$(".contentnav a").removeClass('active');
//Добавляем активный класс
$active.addClass('active');
//Анимация проскальзывания
$(".contentslider").animate({
        left: -slidedistance
    }, 700 );
}; 
 
//Устанавливаем время для проведения проскальзывания
rotation = function(){
play = setInterval(function(){
//Навигация следующего слайда
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
rotate();
//Таймер устанавливаем на 5 сек
}, 15000);
};
//Запускаем функцию вращения
rotation();
$(".other_nav a").click(function() {
$q = $(this);
 var rota = $q.attr('rel');
  if(rota == 'next'){
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
}else{
$active = $('.contentnav a.active').prev();
if ( $active.length === 0) {
//Перемещаемся к первому слайду в навигации
$active = $('.contentnav a:first');
}
}
clearInterval(play);
rotate('click');
rotation();
return false;
});
});

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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />               
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="slide.js"></script>     
        <title>Слайдер</title>               
        <style>         
            #block {
                width: 688px;
                height: 200px;
                overflow: hidden;
                margin: 50px auto 20px auto;
                border: 4px solid #175B53;
            }       
            #slider {
                position:relative;
            }
            .slider_content {
                width: 150px;
                height: 154px;
                margin: 10px 10px;
                line-height: 154px;
                border: 1px solid #557EEF;
                float: left;
                position: relative;
                text-align: center;
            }
            .inslider a {
                text-decoration:none;
            }
            .contentholder {
                height: 200px; 
                width: 172px;
                overflow: visible;
                position: relative;
            }
            .contentslider {
                position: absolute;
                top: 10px; 
                left: 0;
            }
            .contentnav {
                text-align: center;
            }
            .contentnav a {
                text-decoration: none;
                background-color: #D1FFD2;
                padding: 0 7px;
            }
            .contentnav a.active {
                background-color: #FFEE7E;
            }
            .other_nav {
                text-align: center;
            }
        </style>        
    </head>
 
    <body>
    
        <div id='block'>
            <!-- Контент слайдера -->
            <div class="contentholder">                 
                <div class="contentslider">                 
                    <div class="slider_content">
                        Какой то текст 1
                    </div>                      
                    <div class="slider_content">
                        Какой то текст 2
                    </div>                  
                    <div class="slider_content">
                        Какой то текст 3
                    </div>
                    <div class="slider_content">
                        Какой то текст 4
                    </div>                      
                    <div class="slider_content">
                        Какой то текст 5
                    </div>                  
                    <div class="slider_content">
                        Какой то текст 6
                    </div>
                    <div class="slider_content">
                        Какой то текст 7
                    </div>                  
                    <div class="slider_content">
                        Какой то текст 8
                    </div>
                </div>                      
            </div>
        </div>
        
        <!-- Навигация слайдера -->
        <div class="contentnav">
            <a rel="1" href="#">1</a>
            <a rel="2" href="#">2</a>
            <a rel="3" href="#">3</a>
            <a rel="4" href="#">4</a>
            <a rel="5" href="#">5</a>
        </div>
        
        <div class="other_nav"> <a href="#" rel="prev">Назад</a> <a href="#" rel="next">Вперед</a> </div>
        
    </body> 
</html>

Пользуйся

@dima-f1 · 02.03.2012, 17:27 **[ТС]**

Огромное спасибо!!!

Я его немного подкорректировал и у меня появилась еще одна небольшая просьба. А можно ли сделать так, чтобы, когда слайдер находится в положении 1 ссылка "назад" ставала неактивной, а когда в положении 5, то ссылка "вперед" ставала неактивной. И изображения этих ссылок менялись, например:
с
Название: arrow_left.png
Просмотров: 171

Размер: 850 байт

на

Вот slider.zip. Выручайте!

@suharik · 02.03.2012, 17:29

Давайте вечером. Сейчас никак немогу.

@dima-f1 · 05.03.2012, 12:35 **[ТС]**

suharik, ну что, вы смотрели?

@suharik · 05.03.2012, 17:24

Смотрел, но пока к сожалению времени нет. Там не быстро делается.

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@dima-f1 0 / 0 / 0 Регистрация: 29.02.2012 Сообщений: 5
	02.03.2012, 00:37 [ТС]
	Начало есть, но работает неправильно Раньше было: Демонстрация до внесенных изменений Теперь: Демонстрация после внесенных изменений 0

@suharik 261 / 247 / 57 Регистрация: 03.09.2010 Сообщений: 805
	02.03.2012, 10:27
	Эх, придется себе ставить на комп) Сейчас ггляну 0

@dima-f1 0 / 0 / 0 Регистрация: 29.02.2012 Сообщений: 5
	02.03.2012, 17:27 [ТС]
	Огромное спасибо!!! Я его немного подкорректировал и у меня появилась еще одна небольшая просьба. А можно ли сделать так, чтобы, когда слайдер находится в положении 1 ссылка "назад" ставала неактивной, а когда в положении 5, то ссылка "вперед" ставала неактивной. И изображения этих ссылок менялись, например: с на Вот slider.zip. Выручайте! 0

@suharik 261 / 247 / 57 Регистрация: 03.09.2010 Сообщений: 805
	02.03.2012, 17:29
	Давайте вечером. Сейчас никак немогу. 0

@dima-f1 0 / 0 / 0 Регистрация: 29.02.2012 Сообщений: 5
	05.03.2012, 12:35 [ТС]
	suharik, ну что, вы смотрели? 0

@suharik 261 / 247 / 57 Регистрация: 03.09.2010 Сообщений: 805
	05.03.2012, 17:24
	Смотрел, но пока к сожалению времени нет. Там не быстро делается. 0