2 js-кода на 1 странице. Переменные разные, но один всё же работает не полностью

@dimator · Регистрация: 10.12.2014

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

Делаю две галереи, выложил сюда, чтобы имелось представление. Прокрутку (по вертикали) решил реализовать по одному принципу, подключив два js-файла.
По отдельности прокрутка работает, на каждой из галерей. Вместе - нет. Где то конфликтуют коды.. я вроде уникализировал все переменные, но видимо, не все.. помогите пожалуйста разобраться.

Первый код для первой галереи.

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
this.easyscroll = function(){
    
    // id of the container element 
    var id = "myContent";
    
    // navigation buttons text
    var nav = ["Scroll Up", "Scroll Down", "Reset"];
    
    //  id for each navigation button (OPTIONAL)
    var navId = ["btnUp", "btnDown", "btnReset"];
 
    // movement speed
    var speed = 5;
    
    // desired height of the container element (in pixels)
    var height = 314;
    
    //
    // END CONFIG
    // do not edit below this line (unless you want to of course :) )
    //
 
    var obj = document.getElementById(id);
    
    obj.up = false;
    obj.down = false;
    obj.fast = false;
 
    var container = document.createElement("div");
    var parent = obj.parentNode;
    container.id="easyscroll";
    parent.insertBefore(container,obj);
    parent.removeChild(obj);    
    
    container.style.position = "relative";
    container.style.height = height + "px";
    container.style.overflow = "hidden";
    obj.style.position = "absolute";
    obj.style.top = "0";
    obj.style.left = "0";
    container.appendChild(obj);
    
    var btns = new Array();
    var ul = document.createElement("ul");
    ul.id="easyscrollnav";
    for (var i=0;i<nav.length;i++){
        var li = document.createElement("li");
        li.innerHTML = nav[i];
        li.id = navId[i];
        btns.push(li);
        ul.appendChild(li);
    };
    parent.insertBefore(ul,container);
    
    btns[0].onmouseover = function(){
        obj.up = true;
        this.className = "over";
    };
    btns[0].onmouseout = function(){
        obj.up = false;
        this.className = "";
    };      
    btns[1].onmouseover = function(){
        obj.down = true;
        this.className = "over";        
    };
    btns[1].onmouseout = function(){
        obj.down = false;
        this.className = "";
    };      
    btns[0].onmousedown = btns[1].onmousedown = function(){
        obj.fast = true;
    };  
    btns[0].onmouseup = btns[1].onmouseup = function(){
        obj.fast = false;
    };      
    btns[2].onmouseover = function(){       
        this.className = "over";
    };  
    btns[2].onmouseout = function(){        
        this.className = "";
    };      
    btns[2].onclick = function(){       
        obj.style.top = "0px";
    };      
        
    this.start = function(){                
        var newTop;
        var objHeight = obj.offsetHeight;
        var top = obj.offsetTop;
        var fast = (obj.fast) ? 2 : 1;
        if(obj.down){        
            newTop = ((objHeight+top) > height) ? top-(speed*fast) : top;   
            obj.style.top = newTop + "px";
        };  
        if(obj.up){      
            newTop = (top < 0) ? top+(speed*fast) : top;
            obj.style.top = newTop + "px";
        };
    };  
    obj.interval = setInterval("start()",50);       
        
};
 
 
//
// script initiates on page load. 
//
 
this.addEvent = function(obj,type,fn){
    if(obj.attachEvent){
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn](window.event );}
        obj.attachEvent('on'+type, obj[type+fn]);
    } else {
        obj.addEventListener(type,fn,false);
    };
};
addEvent(window,"load",easyscroll);

Второй код для второй галереи.

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
this.easyscrollvg = function(){
    
    // id контейнера элемента, который нужнзо проокрутить
    var id = "unique_id";
    
    // текст в кнопках навигации
    var nav = ["Вверх ", "Вниз ", "Сброс "];
    
    //  id for each navigation button (OPTIONAL)
    var navId = ["btnUpvg", "btnDownvg", "btnResetvg"];
 
    // movement speed
    var speed = 5;
    
    // desired height of the container element (in pixels)
    var height = 296;
    
//
    // END CONFIG
    // do not edit below this line (unless you want to of course :) )
    //
 
    var obj = document.getElementById(id);
    
    obj.up = true;
    obj.down = true;
    obj.fast = true;
 
    var container = document.createElement("div");
    var parent = obj.parentNode;
    container.id="easyscrollvg";
    parent.insertBefore(container,obj);
    parent.removeChild(obj);    
    
    container.style.position = "relative";
    container.style.height = height + "px";
    container.style.overflow = "hidden";
    obj.style.position = "absolute";
    obj.style.top = "0";
    obj.style.left = "0";
    container.appendChild(obj);
    
    var btnsvg = new Array();
    var ul = document.createElement("ul");
    ul.id="easyscrollnavvg";
    for (var i=0;i<nav.length;i++){
        var li = document.createElement("li");
        li.innerHTML = nav[i];
        li.id = navId[i];
        btnsvg.push(li);
        ul.appendChild(li);
    };
    parent.insertBefore(ul,container);
    
    btnsvg[0].onmouseover = function(){
        obj.up = true;
        this.className = "overvg";
    };
    btnsvg[0].onmouseout = function(){
        obj.up = false;
        this.className = "";
    };      
    btnsvg[1].onmouseover = function(){
        obj.down = true;
        this.className = "overvg";      
    };
    btnsvg[1].onmouseout = function(){
        obj.down = false;
        this.className = "";
    };      
    btnsvg[0].onmousedown = btnsvg[1].onmousedown = function(){
        obj.fast = true;
    };  
    btnsvg[0].onmouseup = btnsvg[1].onmouseup = function(){
        obj.fast = false;
    };      
    btnsvg[2].onmouseover = function(){         
        this.className = "overvg";
    };  
    btnsvg[2].onmouseout = function(){      
        this.className = "";
    };      
    btnsvg[2].onclick = function(){         
        obj.style.top = "0px";
    };      
        
    this.start = function(){                
        var newTop;
        var objHeight = obj.offsetHeight;
        var top = obj.offsetTop;
        var fast = (obj.fast) ? 2 : 1;
        if(obj.down){        
            newTop = ((objHeight+top) > height) ? top-(speed*fast) : top;   
            obj.style.top = newTop + "px";
        };  
        if(obj.up){      
            newTop = (top < 0) ? top+(speed*fast) : top;
            obj.style.top = newTop + "px";
        };
    };  
    obj.interval = setInterval("start()",50);       
        
};
 
 
//
// script initiates on page load. 
//
 
this.addEvent = function(obj,type,fn){
    if(obj.attachEvent){
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn](window.event );}
        obj.attachEvent('on'+type, obj[type+fn]);
    } else {
        obj.addEventListener(type,fn,false);
    };
};
addEvent(window,"load",easyscrollvg);

@Thisman · 10.12.2014, 05:02

dimator, обычно что бы скрыть все переменные, в файлах js все оборачивают в анонимную-самовызывающуюся функцию

JavaScript
1
(function (param) {})(param) // функция вызовется сразу же

Все что находится в этой функции не будет видно в глобальной области, даже если одинаковые перемененные в нескольких таких функциях

JavaScript
1
2
3
(function () { var a = 10 })();
(function () { var a = -10 )();
// тут две ни как с друг другом не взаимодействуют

Обычно из такой фунции выносят один общий объект, который и становится глобальным, все остальное скрыто

JavaScript
1
2
3
4
5
6
7
8
9
10
(function (w) {
    /* тут какой то код*/
    var Global = {};
    var message = "Hello, world!";
    Global.showMess = function () { alert(message) } // message видна только в этой видимости
    w.global = Global; // теперь видна переменная global, которая имеет все методы рабочие объекта
    // причем вся остальная тех инфа скрыта
})(window);
//Можем использовать теперь
global.showMess() // Hello,world

@dimator · 10.12.2014, 15:06 **[ТС]**

Спасибо. Вы дали готовые очки, но они попали в руки обезьяне. Я и так и сяк пытался применить вашу конструкцию. Суть понятна, а технически реализовать не смог.

вот как я сделал

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
(function () { 
this.easyscroll = function(){
    
    // id of the container element 
    var id = "myContent";
    
    // navigation buttons text
    var nav = ["Scroll Up", "Scroll Down", "Reset"];
    
    //  id for each navigation button (OPTIONAL)
    var navId = ["btnUp", "btnDown", "btnReset"];
 
    // movement speed
    var speed = 5;
    
    // desired height of the container element (in pixels)
    var height = 314;
    
    //
    // END CONFIG
    // do not edit below this line (unless you want to of course :) )
    //
 
    var obj = document.getElementById(id);
    
    obj.up = false;
    obj.down = false;
    obj.fast = false;
 
    var container = document.createElement("div");
    var parent = obj.parentNode;
    container.id="easyscroll";
    parent.insertBefore(container,obj);
    parent.removeChild(obj);    
    
    container.style.position = "relative";
    container.style.height = height + "px";
    container.style.overflow = "hidden";
    obj.style.position = "absolute";
    obj.style.top = "0";
    obj.style.left = "0";
    container.appendChild(obj);
    
    var btns = new Array();
    var ul = document.createElement("ul");
    ul.id="easyscrollnav";
    for (var i=0;i<nav.length;i++){
        var li = document.createElement("li");
        li.innerHTML = nav[i];
        li.id = navId[i];
        btns.push(li);
        ul.appendChild(li);
    };
    parent.insertBefore(ul,container);
    
    btns[0].onmouseover = function(){
        obj.up = true;
        this.className = "over";
    };
    btns[0].onmouseout = function(){
        obj.up = false;
        this.className = "";
    };      
    btns[1].onmouseover = function(){
        obj.down = true;
        this.className = "over";        
    };
    btns[1].onmouseout = function(){
        obj.down = false;
        this.className = "";
    };      
    btns[0].onmousedown = btns[1].onmousedown = function(){
        obj.fast = true;
    };  
    btns[0].onmouseup = btns[1].onmouseup = function(){
        obj.fast = false;
    };      
    btns[2].onmouseover = function(){       
        this.className = "over";
    };  
    btns[2].onmouseout = function(){        
        this.className = "";
    };      
    btns[2].onclick = function(){       
        obj.style.top = "0px";
    };      
        
    this.start = function(){                
        var newTop;
        var objHeight = obj.offsetHeight;
        var top = obj.offsetTop;
        var fast = (obj.fast) ? 2 : 1;
        if(obj.down){        
            newTop = ((objHeight+top) > height) ? top-(speed*fast) : top;   
            obj.style.top = newTop + "px";
        };  
        if(obj.up){      
            newTop = (top < 0) ? top+(speed*fast) : top;
            obj.style.top = newTop + "px";
        };
    };  
    obj.interval = setInterval("start()",50);       
        
};
 
 
//
// script initiates on page load. 
//
 
this.addEvent = function(obj,type,fn){
    if(obj.attachEvent){
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn](window.event );}
        obj.attachEvent('on'+type, obj[type+fn]);
    } else {
        obj.addEventListener(type,fn,false);
    };
};
addEvent(window,"load",easyscroll);
})(window);
this.easyscroll()

@Thisman · 10.12.2014, 15:48

Сообщение от dimator

this.easyscroll

В данном случае ссылка будет ссылаться на window, то есть используя this вы будете делать свойство глобальным. Думаю тут не правильно так делать

Добавлено через 11 минут
Сделайте что нить на подобии

JavaScript
1
2
3
(function(w) {
   w.easeScroll = {/* тут уже укажите все ваши методы, которые начинаются с this */ }
})(window)

@dimator · 11.12.2014, 20:48 **[ТС]**

сделал два кода.

Первый

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
(function() {
var easyscroll = function(){
    
    // id of the container element 
    var id = "myContent";
    
    // navigation buttons text
    var nav = ["Scroll Up", "Scroll Down", "Reset"];
    
    //  id for each navigation button (OPTIONAL)
    var navId = ["btnUp", "btnDown", "btnReset"];
 
    // movement speed
    var speed = 5;
    
    // desired height of the container element (in pixels)
    var height = 314;
    
    //
    // END CONFIG
    // do not edit below this line (unless you want to of course :) )
    //
 
    var obj = document.getElementById(id);
    
    obj.up = false;
    obj.down = false;
    obj.fast = false;
 
    var container = document.createElement("div");
    var parent = obj.parentNode;
    container.id="easyscroll";
    parent.insertBefore(container,obj);
    parent.removeChild(obj);    
    
    container.style.position = "relative";
    container.style.height = height + "px";
    container.style.overflow = "hidden";
    obj.style.position = "absolute";
    obj.style.top = "0";
    obj.style.left = "0";
    container.appendChild(obj);
    
    var btns = new Array();
    var ul = document.createElement("ul");
    ul.id="easyscrollnav";
    for (var i=0;i<nav.length;i++){
        var li = document.createElement("li");
        li.innerHTML = nav[i];
        li.id = navId[i];
        btns.push(li);
        ul.appendChild(li);
    };
    parent.insertBefore(ul,container);
    
    btns[0].onmouseover = function(){
        obj.up = true;
        this.className = "over";
    };
    btns[0].onmouseout = function(){
        obj.up = false;
        this.className = "";
    };      
    btns[1].onmouseover = function(){
        obj.down = true;
        this.className = "over";        
    };
    btns[1].onmouseout = function(){
        obj.down = false;
        this.className = "";
    };      
    btns[0].onmousedown = btns[1].onmousedown = function(){
        obj.fast = true;
    };  
    btns[0].onmouseup = btns[1].onmouseup = function(){
        obj.fast = false;
    };      
    btns[2].onmouseover = function(){       
        this.className = "over";
    };  
    btns[2].onmouseout = function(){        
        this.className = "";
    };      
    btns[2].onclick = function(){       
        obj.style.top = "0px";
    };      
        
    this.start = function(){                
        var newTop;
        var objHeight = obj.offsetHeight;
        var top = obj.offsetTop;
        var fast = (obj.fast) ? 2 : 1;
        if(obj.down){        
            newTop = ((objHeight+top) > height) ? top-(speed*fast) : top;   
            obj.style.top = newTop + "px";
        };  
        if(obj.up){      
            newTop = (top < 0) ? top+(speed*fast) : top;
            obj.style.top = newTop + "px";
        };
    };  
    obj.interval = setInterval("start()",50);       
        
};
 
 
//
// script initiates on page load. 
//
 
var addEvent = function(obj,type,fn){
    if(obj.attachEvent){
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn](window.event );}
        obj.attachEvent('on'+type, obj[type+fn]);
    } else {
        obj.addEventListener(type,fn,false);
    };
};
addEvent(window,"load",easyscroll);
}());

второй

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
(function() {
var easyscroll = function(){
    
    // id контейнера элемента, который нужнзо проокрутить
    var id = "unique_id";
    
    // navigation buttons text
    var nav = ["vgScroll Up", "vgScroll Down", "vgReset"];
    
    //  id for each navigation button (OPTIONAL)
    var navId = ["btnUpvg", "btnDownvg", "btnResetvg"];
 
    // movement speed
    var speed = 5;
    
    // desired height of the container element (in pixels)
    var height = 314;
    
    //
    // END CONFIG
    // do not edit below this line (unless you want to of course :) )
    //
 
    var obj = document.getElementById(id);
    
    obj.up = false;
    obj.down = false;
    obj.fast = false;
 
    var container = document.createElement("div");
    var parent = obj.parentNode;
    container.id="easyscroll";
    parent.insertBefore(container,obj);
    parent.removeChild(obj);    
    
    container.style.position = "relative";
    container.style.height = height + "px";
    container.style.overflow = "hidden";
    obj.style.position = "absolute";
    obj.style.top = "0";
    obj.style.left = "0";
    container.appendChild(obj);
    
    var btns = new Array();
    var ul = document.createElement("ul");
    ul.id="easyscrollnav";
    for (var i=0;i<nav.length;i++){
        var li = document.createElement("li");
        li.innerHTML = nav[i];
        li.id = navId[i];
        btns.push(li);
        ul.appendChild(li);
    };
    parent.insertBefore(ul,container);
    
    btns[0].onmouseover = function(){
        obj.up = true;
        this.className = "over";
    };
    btns[0].onmouseout = function(){
        obj.up = false;
        this.className = "";
    };      
    btns[1].onmouseover = function(){
        obj.down = true;
        this.className = "over";        
    };
    btns[1].onmouseout = function(){
        obj.down = false;
        this.className = "";
    };      
    btns[0].onmousedown = btns[1].onmousedown = function(){
        obj.fast = true;
    };  
    btns[0].onmouseup = btns[1].onmouseup = function(){
        obj.fast = false;
    };      
    btns[2].onmouseover = function(){       
        this.className = "over";
    };  
    btns[2].onmouseout = function(){        
        this.className = "";
    };      
    btns[2].onclick = function(){       
        obj.style.top = "0px";
    };      
        
    this.start = function(){                
        var newTop;
        var objHeight = obj.offsetHeight;
        var top = obj.offsetTop;
        var fast = (obj.fast) ? 2 : 1;
        if(obj.down){        
            newTop = ((objHeight+top) > height) ? top-(speed*fast) : top;   
            obj.style.top = newTop + "px";
        };  
        if(obj.up){      
            newTop = (top < 0) ? top+(speed*fast) : top;
            obj.style.top = newTop + "px";
        };
    };  
    obj.interval = setInterval("start()",50);       
        
};
 
 
//
// script initiates on page load. 
//
 
var addEvent = function(obj,type,fn){
    if(obj.attachEvent){
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn](window.event );}
        obj.attachEvent('on'+type, obj[type+fn]);
    } else {
        obj.addEventListener(type,fn,false);
    };
};
addEvent(window,"load",easyscroll);
}());

но, к сожалению, по-прежнему прокрутка работает только на одной галерее.

@Thisman · 12.12.2014, 05:23

dimator, еще раз повторяю, потому что ваша ссылка this ссылается на window, а значит во второй функции затирает свойство start, поэтому и первый слайдер не работает

Раб. вариант

JavaScript
1
2
// во второй функции поменял глобальное свойство , что бы не затирало свойство первой функции
this._start = function(){

Если у вас есть глобальные методы, переменные, то они будут переписываться, даже если вы скроете их в своей области видимости, тут лучше использовать уникальные id, которые генерятся, что бы глобальные свойства/методы/переменные всегда отличались

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

2 js-кода на 1 странице. Переменные разные, но один всё же работает не полностью

Решение