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

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

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

Решение