Цикличный слайдер

13.09.2013, 11:35. **Показов** 2054. **Ответов** 2

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

Всем привет, нужна помощь, есть скрипт slider, есть необходимость сделать в нем изменение: после показа последней панели, что бы вовращался на 1, и наоборот, при перелистывании в обратную сторону с 1й на последнюю. Скрипт прикрепляю, буду рад помощи.

@Schtrich · 14.09.2013, 14:21

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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
$(function() {
    
    var totalPanels         = $(".scrollContainer").children().size();
        
    var regWidth            = $(".panel").css("width");
    var regImgWidth         = $(".panel img").css("width");
    var regTitleSize        = $(".panel h2").css("font-size");
    var regParSize          = $(".panel p").css("font-size");
    
    var movingDistance      = 300;
    
    var curWidth            = 350;
    var curImgWidth         = 326;
    var curTitleSize        = "20px";
    var curParSize          = "15px";
 
    var $panels             = $('#slider .scrollContainer > div');
    var $container          = $('#slider .scrollContainer');
 
    $panels.css({'float' : 'left','position' : 'relative'});
    
    $("#slider").data("currentlyMoving", false);
 
    $container
        .css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
        .css('left', "-350px");
 
    var scroll = $('#slider .scroll').css('overflow', 'hidden');
 
    function returnToNormal(element) {
        $(element)
            .animate({ width: regWidth })
            .find("img")
            .animate({ width: regImgWidth })
            .end()
            .find("h2")
            .animate({ fontSize: regTitleSize })
            .end()
            .find("p")
            .animate({ fontSize: regParSize });
    };
    
    function growBigger(element) {
        $(element)
            .animate({ width: curWidth })
            .find("img")
            .animate({ width: curImgWidth })
            .end()
            .find("h2")
            .animate({ fontSize: curTitleSize })
            .end()
            .find("p")
            .animate({ fontSize: curParSize });
    }
    
    //direction true = right, false = left
    function change(direction) {
       
        //if not at the first or last panel
        //if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; } 
                
        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {
            
            $("#slider").data("currentlyMoving", true);
            
            var next         = direction ? curPanel + 1 : curPanel - 1;
            
            if (next > totalPanels) {
                next = 1;
            }
            
            if (next < 1) {
                next = totalPanels;
            }
            
            var leftValue    = $(".scrollContainer").css("left");
            var movement     = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
                    
            $(".scrollContainer")
                .stop()
                .animate({
                    "left": movement
                }, function() {
                    $("#slider").data("currentlyMoving", false);
                });
            
            returnToNormal("#panel_"+curPanel);
            growBigger("#panel_"+next);
                            
            curPanel = next;
                                    
            //remove all previous bound functions
            $("#panel_"+(curPanel+1)).unbind(); 
            
            //go forward
            $("#panel_"+(curPanel+1)).click(function(){ change(true); });
            
            //remove all previous bound functions                                                           
            $("#panel_"+(curPanel-1)).unbind();
            
            //go back
            $("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
            
            //remove all previous bound functions
            $("#panel_"+curPanel).unbind();
        } 
    }
    
    // Set up "Current" panel and next and prev
    growBigger("#panel_3"); 
    var curPanel = 3;
    
    $("#panel_"+(curPanel+1)).click(function(){ change(true); });
    $("#panel_"+(curPanel-1)).click(function(){ change(false); });
    
    //when the left/right arrows are clicked
    $(".right").click(function(){ change(true); }); 
    $(".left").click(function(){ change(false); });
    
    $(window).keydown(function(event){
      switch (event.keyCode) {
            case 13: //enter
                $(".right").click();
                break;
            case 32: //space
                $(".right").click();
                break;
        case 37: //left arrow
                $(".left").click();
                break;
            case 39: //right arrow
                $(".right").click();
                break;
      }
    });
    
});

15.09.2013, 20:55

Не работает(, после последней панели, листает в пустое поле, обратно точно так же...

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

xander_kage
	15.09.2013, 20:55
	Не работает(, после последней панели, листает в пустое поле, обратно точно так же...

Цикличный слайдер

Решение