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, которые генерятся, что бы глобальные свойства/методы/переменные всегда отличались

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .

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

Решение