Остановка функции при нажатии кнопки, вторая кнопка запуск повторно, третья запуск по одной картинке

@YuriiM · Регистрация: 07.11.2023

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

Здравствуйте! Есть функция показывающая фотографии, необходимо сделать остановку показа по клику на кнопке, вторая кнопка возобновляет показ в цикле, третья показывает по одной. Пытался сделать это с использованием функции генератора, вставляя оператор yield в то место где будет остановка, и кода вызывающего метод next(), но рабочего кода не получилось. Посмотрите может кто подскажет.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  
 <div class="strela"><a href="../malikovi/malikovi.html"><img src="images/strela.png"></a></div>
 <div class="shapka">
  <button class="btn" onclick="myMove()"><p style="padding:30px 10px;">Маликов<br> Алексей<br> Спиридонович</p><img src="images/ded1.jpg" style="width:100px; height:150px; border-radius: 20px; margin-top: 15px;"><p style="padding:50px 10px;">Начать показ</p></button>
  <button class="btn" onclick="myMove(); window.location.href='../Malikova_Nataliya/Nataliya.html'"><p style="padding:30px 10px;">Маликовa<br>Наталья<br>Петровна<br><br>08.09.1905</p><img src="images/grendma1.jpg" style="width:100px; height:150px; border-radius: 20px; margin-top: 15px;"><p style="padding:55px 10px;">Начать показ<br><br><br>29.07.1966</p></button></div>
  <button class="btn1" onclick="stop()">Пауза </button>
  <button class="btn1" onclick="nextStep()">Следующая фотография</button>
  
</div>
  <div id="myContainer">
      <img src="/images/3.jpg">
  </div>
  <div class="text">
  <pre></pre>
</div>
<div id ="imageContainer">
    <img src="images/svecha.gif"> 
</div>
<script src="main.js"></script>

// функция для показа фотографий

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
const images = ["6.jpg", "5.jpg", "3.jpg"];
const img = document.querySelector('#myContainer>img')
async function* myMove() {    
    for (let i = 0; i < images.length; i++) {   
        yield i;    
        img.src = '';
        img.classList.remove('animate', 'animlast');
        img.src = 'images/' + images[i];
        await img.decode();
        img.classList.add(i === images.length - 1? 'animlast': 'animate');
            if (i < images.length - 1) {        
        await (function () {
                return new Promise ( (res) => {          
                    img.addEventListener('transitionend',
                        function hte (event) {
                            if (event.propertyName === 'opacity') {
                                this.removeEventListener('transitionend', hte);
                                res();
                            }
                        }
                    )               
                })
            })();            
 
    }
}
} 
//Создаем генератор
const generatorInstance = myMove();
 
const nextStep = () => {
    const { value } = generatorInstance.next();
    document.getElementById("myContainer >img").innerHTML = value;
  }
  
  const state = {
    timeoutId: 0,
  }
 
  const myMove = () => {
  
    if (state.timeoutId === 0) {
      state.timeoutId = setInterval(() => nextStep(), 1000)
    }
  }
  
  const stop = () => { 
    clearTimeout(state.timeoutId);
    state.timeoutId = 0;
  }
 
  const stepForward = () => nextStep()

@voraa · 12.11.2024, 19:23

Просто реализация работы при нажатии кнопок.

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
<style>
img {
    width: 400px;
    height: 300px;
}
</style>
</head>
 
<body>
    <div id="myContainer">
        <img id="image">
    </div>
    <button id="bplay">Play</button>
    <button id="bpause">Pause</button>
    <button id="bnext">Next</button>
 
<script>
const images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
const showtime = 2000;
 
let timer;
let isplaying = false;
 
const image = document.getElementById('image');
 
const play = () => {
    if (isplaying) return;
    isplaying = true;
    next();
}
 
const pause = () => {
    clearTimeout(timer);
    isplaying = false;
}
 
const next = () => {
    curimg =(curimg + 1) % images.length;
    image.src = images[curimg];
    if (isplaying) {
        clearTimeout(timer);
        timer = setTimeout (next, showtime);
    }
}
 
document.getElementById('bplay').addEventListener('click', play);
document.getElementById('bpause').addEventListener('click', pause);
document.getElementById('bnext').addEventListener('click', next);
 
let curimg = -1;
next();
 
</script>
</body>
</html>

Что там надо делать с анимацией и классами - сами сделаете или напишите, что надо.

@YuriiM · 13.11.2024, 08:59 **[ТС]**

Спасибо voraa за помощь, буду разбираться, пробовать.

@YuriiM · 28.11.2024, 11:53 **[ТС]**

Здравствуйте voraa, подскажите как для кнопки play прописать анимацию сделанную ранее. Пытался вставлять функцию myMove для постоянной play, но она ее не видит. Помогите пожалуйста.

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
async function myMove() {    
    for (let i = 0; i < images.length; i++) {             
        img.src = '';
        img.classList.remove('animate', 'animlast');
        img.src = images[i];        
        await img.decode();
        img.classList.add(i === images.length - 1? 'animlast': 'animate');
            if (i < images.length - 1) {        
        await (function () {
                return new Promise ( (res) => {          
                    img.addEventListener('transitionend',
                        function hte (event) {
                            if (event.propertyName === 'opacity') {
                                this.removeEventListener('transitionend', hte);
                                res();
                            }
                        }
                    )               
                })
            })();            
 
    }
}
}

HTML5
1
2
3
4
5
6
<div id="myContainer">
        <img id="image">
    </div>
    <button class="btn" id="bplay" onclick="myMove()">Play</button>
    <button id="bpause">Pause</button>
    <button id="bnext">Next</button>

CSS
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
img { 
  margin-top: 30px;
    border: red solid 3px;
    border-radius: 10%;
    width: 50px;
    height: 50px;
    position:absolute;   
    opacity: 1;  
}
img.animate {
    transition:        
        opacity 3s 5s,
        width 5s,
        height 5s,
        border 5s;
    width: 850px;
    height: 650px;
    border: #b2f50a solid 10px;
    opacity: 0;
}
img.animlast {
    transition:
        width 5s,
        height 5s;
    width: 850px;
    height: 650px;
}

@YuriiM · 04.12.2024, 10:49 **[ТС]**

Уважаемый Voraa, извините за навязчивость, тем не менее хочется получить ответ на вопрос. Как для постоянной pause сделать остановку выполнения показа фотографий, после того как фотография будет увеличена, а при нажатии кнопки play показ фотографий продолжится.

HTML5
1
2
3
4
5
6
<div id="myContainer">
        <img id="image">
    </div>
    <button class="btn" id="bplay" onclick="myMove()">Play</button>
    <button id="bpause">Pause</button>
    <button id="bnext">Next</button>

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
const images = ["https://image.fonwall.ru/o/or/a-beautiful-girl-3d-portrait-uthu.jpeg?auto=compress&fit=resize&h=500&w=500&display=thumb&domain=img3.fonwall.ru",
"https://image.fonwall.ru/o/vt/a-girl-beautiful-slender.jpeg?auto=compress&fit=resize&w=1200&h=801&display=large&domain=img3.fonwall.ru", "https://image.fonwall.ru/o/bl/pretty-girl-3d-neural-network.jpeg?auto=compress&fit=resize&w=1200&h=675&display=large&domain=img3.fonwall.ru"];
 
const showtime = 2000; 
let timer;
let isplaying = false;
const img = document.getElementById('image');
 
    async function myMove() {    
    for (let i = 0; i < images.length; i++) {   
        img.src = '';
        img.classList.remove('animate', 'animlast');
        img.src = images[i];        
        await img.decode();
        img.classList.add(i === images.length - 1? 'animlast': 'animate');
            if (i < images.length - 1) {        
        await (function () {
                return new Promise ( (res) => {          
                    img.addEventListener('transitionend',
                        function hte (event) {
                            if (event.propertyName === 'opacity') {
                                this.removeEventListener('transitionend', hte);
                                res();
                            }
                        }
                    )               
                })
            })();            
 
    }
}
 } 
 
 
const pause = () => {
    clearTimeout(timer);
    isplaying = false;
}
 
const next = () => {
    curimg = (curimg + 1) % images.length;
    image.src = images[curimg];
    if (isplaying) {
        clearTimeout(timer);
        timer = setTimeout (next, showtime);
    }
} 
 
document.getElementById('bpause').addEventListener('click', pause);
document.getElementById('bnext').addEventListener('click', next);
 
let curimg = -1;
next();

CSS
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
img { 
  margin-top: 30px;
    border: red solid 3px;
    border-radius: 10%;
    width: 50px;
    height: 50px;
    position:absolute;   
    opacity: 1;  
}
img.animate {
    transition:        
        opacity 3s 5s,
        width 5s,
        height 5s,
        border 5s;
    width: 850px;
    height: 650px;
    border: #b2f50a solid 10px;
    opacity: 0;
}
img.animlast {
    transition:
        width 5s,
        height 5s;
    width: 850px;
    height: 650px;
}

Буду очень багодарен любой помощи. Заранее спасибо.

@voraa · 04.12.2024, 16:39

Типа такого

PHP/HTML
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
<!DOCTYPE html>
<html>
 
<head>
    <style>
        img {
            margin-top: 30px;
            border: red solid 3px;
            border-radius: 10%;
            width: 50px;
            height: 50px;
            position: absolute;
            opacity: 1;
        }
 
        img.animate {
            transition:
                width 5s,
                height 5s,
                border 5s;
            width: 850px;
            height: 650px;
            border: #b2f50a solid 10px;
        }
 
        img.hide {
            transition: opacity 3s;
            opacity: 0;
            width: 850px;
            height: 650px;
            border: #b2f50a solid 10px;
        }
 
        img.animlast {
            transition:
                width 5s,
                height 5s;
            width: 850px;
            height: 650px;
        }
    </style>
</head>
 
<body>
    <div id="myContainer">
        <img id="image">
    </div>
    <button class="btn" id="bplay">Play</button>
    <button id="bpause">Pause</button>
    <button id="bnext">Next</button>
 
    <script>
        const images = [
            "https://image.fonwall.ru/o/or/a-beautiful-girl-3d-portrait-uthu.jpeg?auto=compress&fit=resize&h=500&w=500&display=thumb&domain=img3.fonwall.ru",
            "https://image.fonwall.ru/o/vt/a-girl-beautiful-slender.jpeg?auto=compress&fit=resize&w=1200&h=801&display=large&domain=img3.fonwall.ru",
            "https://image.fonwall.ru/o/bl/pretty-girl-3d-neural-network.jpeg?auto=compress&fit=resize&w=1200&h=675&display=large&domain=img3.fonwall.ru"
        ];
 
        const showtime = 8000;
        let timer;
        let isplaying = false;
        const img = document.getElementById('image');
 
        let prom = Promise.resolve();
 
        async function show(src) {
            img.classList.remove('animate')
            img.classList.remove('hide')
            img.src = src;
            await img.decode();
            img.classList.add('animate')
            return new Promise((res) => {
                img.addEventListener('transitionend',
                    function hte(event) {
                        if (event.propertyName === 'width') {
                            this.removeEventListener('transitionend', hte);
                            res();
                        }
                    }
                )
            })
        }
 
        async function hide(src) {
            img.classList.remove('animate')
            img.classList.add('hide')
            return new Promise((res) => {
                img.addEventListener('transitionend',
                    function hte(event) {
                        if (event.propertyName === 'opacity') {
                            this.removeEventListener('transitionend', hte);
                            res();
                        }
                    }
                )
            })
        }
 
        const pause = () => {
            clearTimeout(timer);
            timer = 0;
            isplaying = false;
        }
 
        const next = async () => {
            curimg = (curimg + 1) % images.length;
            if ((!img.classList.contains('hide')) && img.src) {
                await prom;
                prom = hide();
            }
            await prom;
            prom = show(images[curimg])
            await prom;
            setTimeout(async () => {
                if (!isplaying) return
                await prom;
                prom = hide();
                timer = setTimeout(next, 0);
            }, 0)
        }
 
        const play = async () => {
            isplaying = true;
            next();
        }
 
        document.getElementById('bpause').addEventListener('click', pause);
        document.getElementById('bnext').addEventListener('click', next);
        document.getElementById('bplay').addEventListener('click', play);
 
        let curimg = -1;
        next();
    </script>
</body>
 
</html>

@YuriiM · 04.12.2024, 17:02 **[ТС]**

Спасибо за быстрый ответ, сейчас буду разбираться, еще раз большое спасибо.

@YuriiM · 06.12.2024, 12:42 **[ТС]**

Здравствуйте voraa, огромное вам спасибо за помощь. Если можно подскажите как в play сделать чтобы последняя фотография из массива оставалась увеличенной и не исчезала. Спасибо.

@gogolik · 06.12.2024, 19:17

Комментарий модератора

YuriiM, или пишите свою задачу сразу целиком, или на новый вопрос создавайте новую тему с подробным описанием.

@voraa · 06.12.2024, 19:24

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

Если можно подскажите как в play сделать чтобы последняя фотография из массива оставалась увеличенной и не исчезала. Спасибо.

Т.е сейчас картинки крутятся в цикле - возврат к первой, после последней. А вам надо, что бы проходило только 1 раз.
Тогда сразу вопросы, что бы потом не переделывать.
Что должно происходить по нажатию play, если последняя картинка уже показана?
Что в этом случае должно происходить по нажатию next?

@YuriiM · 09.12.2024, 09:27 **[ТС]**

Здравствуйте уважаемый voraa, необходимо чтобы после нажатия play проходила анимация показа фотографий, на последней после отработки анимации увеличения цикл завершился. Если в процессе показа нажать на кнопку pause, фотография увеличивается и показ останавливается. После нажатия на кнопку next, показ продолжился по одной фотографии, или если повторно нажать на play анимация продолжилась с остановленной фотографии до последней и на последней цикл завершится. У меня получается так:

HTML5
1
2
3
4
5
6
 <div id="myContainer">
        <img id="image">
    </div>
    <button class="btn" id="bplay">Play</button>
    <button id="bpause">Pause</button>
    <button id="bnext">Next</button>

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
 const images = [
            "https://image.fonwall.ru/o/or/a-beautiful-girl-3d-portrait-uthu.jpeg?auto=compress&fit=resize&h=500&w=500&display=thumb&domain=img3.fonwall.ru",
            "https://image.fonwall.ru/o/vt/a-girl-beautiful-slender.jpeg?auto=compress&fit=resize&w=1200&h=801&display=large&domain=img3.fonwall.ru",
            "https://image.fonwall.ru/o/bl/pretty-girl-3d-neural-network.jpeg?auto=compress&fit=resize&w=1200&h=675&display=large&domain=img3.fonwall.ru"
        ];
 
       const showtime = 8000;
        let timer;
        let isplaying = false;
        const img = document.getElementById('image');
 
        let prom = Promise.resolve();
 
        async function show(src) {
            img.classList.remove('animate')
            img.classList.remove('hide')
            img.src = src;
            await img.decode();
            img.classList.add('animate')
            return new Promise((res) => {
                img.addEventListener('transitionend',
                    function hte(event) {
                        if (event.propertyName === 'width') {
                            this.removeEventListener('transitionend', hte);
                            res();
                        }
                    }
                )
            })
        }
 
        async function hide(src) {
            img.classList.remove('animate')
            img.classList.add('hide')
            return new Promise((res) => { 
                img.addEventListener('transitionend',
                    function hte(event) {
                        if (event.propertyName === 'opacity') {
                            this.removeEventListener('transitionend', hte);
                            res();
                        }
                    }
                )
            })
        }
 
        const pause = () => {
            clearTimeout(timer);
            timer = 0;
            isplaying = false;
        }
 
        const next = async () => {
            curimg = (curimg + 1) % images.length;
            if ((!img.classList.contains('hide')) && img.src) {
                await prom;
                prom = hide();
            }
            await prom;
            prom = show(images[curimg])
            await prom;
            setTimeout(async () => {
                if (!isplaying) return
                await prom;
                prom = hide();
                timer = setTimeout(next, 0);
            }, 0)
        }
 
        const play = async () => {
            isplaying = true;
           // if (i === images.length - 1) { 
           //    img.classList.add('animate')
           // }
              next();
          if (i === images.length - 1) { 
               img.classList.add('animate')
            }
          clearTimeout(timer);
            timer = 0;
            isplaying = false;
        }
 
        document.getElementById('bpause').addEventListener('click', pause);
        document.getElementById('bnext').addEventListener('click', next);
        document.getElementById('bplay').addEventListener('click', play);
 
        let curimg = -1;

CSS
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
 img {
            margin-top: 30px;
            border: red solid 3px;
            border-radius: 10%;
            width: 50px;
            height: 50px;
            position: absolute;
            opacity: 0;
        }
 
        img.animate {
            transition:
                opacity 3s,
                width 5s,
                height 5s,
                border 5s;
            width: 850px;
            height: 650px;
            border: #b2f50a solid 10px;
            opacity:1;
        }
 
        img.hide {
            transition: 
              opacity 3s;
            opacity: 0;
            width: 850px;
            height: 650px;
            border: #b2f50a solid 10px;
        }
 
        img.animlast {
            transition:
                width 5s,
                height 5s;
            width: 850px;
            height: 650px;
        }

Здесь при нажатии на кнопку play показ фотографий зациклен, Остальное все работает как и задумано.
Огромное спасибо заранее.

@voraa · 09.12.2024, 09:36

Ну просто в next и play проверять, если curimg === images.length - 1, то ничего не делать и сразу return.

@YuriiM · 10.12.2024, 16:23 **[ТС]**

JavaScript
1
2
3
4
5
6
const play = async () => {
           if (isplaying = true) 
           next();
           else if (curimg === images.length - 1) 
              return;        
           }

Совсем не понимаю почему этот код не работает

@voraa · 10.12.2024, 16:28

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

const play = async () => {
if (isplaying = true)
next();
else if (curimg === images.length - 1)
return;
}
Совсем не понимаю почему этот код не работает

А вы сами в голове (на бумажке) попытайтесь выполнить этот код.
Или словами объясните себе, про каждую строчку - что она делает и зачем.
Или пройдите его пошагово в отладчике средств разработки.
Только сначала посмотрите в консоль на ошибки.

@YuriiM · 12.12.2024, 15:50 **[ТС]**

К сожалению не получается прописать условие для play, должен признаться моих знаний не хватает, javascript знаю на уровне элементарной математики, ваш код понимаю только интуитивно. Помогите мне закончить мой проект. Спасибо.

@voraa · 12.12.2024, 16:10

PHP/HTML
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
139
140
141
142
<!DOCTYPE html>
<html>
 
<head>
    <style>
        img {
            margin-top: 30px;
            border: red solid 3px;
            border-radius: 10%;
            width: 50px;
            height: 50px;
            position: absolute;
            opacity: 1;
        }
 
        img.animate {
            transition:
                width 5s,
                height 5s,
                border 5s;
            width: 850px;
            height: 650px;
            border: #b2f50a solid 10px;
        }
 
        img.hide {
            transition: opacity 3s;
            opacity: 0;
            width: 850px;
            height: 650px;
            border: #b2f50a solid 10px;
        }
 
        img.animlast {
            transition:
                width 5s,
                height 5s;
            width: 850px;
            height: 650px;
        }
    </style>
</head>
 
<body>
    <div id="myContainer">
        <img id="image">
    </div>
    <button class="btn" id="bplay">Play</button>
    <button id="bpause">Pause</button>
    <button id="bnext">Next</button>
 
    <script>
        const images = [
            "https://image.fonwall.ru/o/or/a-beautiful-girl-3d-portrait-uthu.jpeg?auto=compress&fit=resize&h=500&w=500&display=thumb&domain=img3.fonwall.ru",
            "https://image.fonwall.ru/o/vt/a-girl-beautiful-slender.jpeg?auto=compress&fit=resize&w=1200&h=801&display=large&domain=img3.fonwall.ru",
            "https://image.fonwall.ru/o/bl/pretty-girl-3d-neural-network.jpeg?auto=compress&fit=resize&w=1200&h=675&display=large&domain=img3.fonwall.ru"
        ];
 
        const showtime = 8000;
        let timer;
        let isplaying = false;
        const img = document.getElementById('image');
 
        let prom = Promise.resolve();
 
        async function show(src) {
            img.classList.remove('animate')
            img.classList.remove('hide')
            img.src = src;
            await img.decode();
            img.classList.add('animate')
            return new Promise((res) => {
                img.addEventListener('transitionend',
                    function hte(event) {
                        if (event.propertyName === 'width') {
                            this.removeEventListener('transitionend', hte);
                            res();
                        }
                    }
                )
            })
        }
 
        async function hide(src) {
            img.classList.remove('animate')
            img.classList.add('hide')
            return new Promise((res) => {
                img.addEventListener('transitionend',
                    function hte(event) {
                        if (event.propertyName === 'opacity') {
                            this.removeEventListener('transitionend', hte);
                            res();
                        }
                    }
                )
            })
        }
 
        const pause = () => {
            clearTimeout(timer);
            timer = 0;
            isplaying = false;
        }
 
        const next = async () => {
            if (curimg === images.length - 1) 
                return;
            curimg = (curimg + 1) % images.length;
            if ((!img.classList.contains('hide')) && img.src) {
                await prom;
                prom = hide();
            }
            await prom;
            prom = show(images[curimg])
            await prom;
            if (curimg === images.length - 1) 
                return;
            setTimeout(async () => {
                if (!isplaying) return
                await prom;
                prom = hide();
                timer = setTimeout(next, 0);
            }, 0)
        }
 
        const play = async () => {
            if (curimg === images.length - 1) 
                return;
            isplaying = true;           
            next();
        }
 
        document.getElementById('bpause').addEventListener('click', pause);
        document.getElementById('bnext').addEventListener('click', next);
        document.getElementById('bplay').addEventListener('click', play);
 
        let curimg = -1;
        play();
    </script>
</body>
 
</html>

@YuriiM · 12.12.2024, 16:35 **[ТС]**

Спасибо большое, все работает как задумано.

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

Остановка функции при нажатии кнопки, вторая кнопка запуск повторно, третья запуск по одной картинке

Решение

Решение

@YuriiM 0 / 0 / 0 Регистрация: 07.11.2023 Сообщений: 29
	13.11.2024, 08:59 [ТС]
	Спасибо voraa за помощь, буду разбираться, пробовать. 0

@YuriiM 0 / 0 / 0 Регистрация: 07.11.2023 Сообщений: 29
	04.12.2024, 17:02 [ТС]
	Спасибо за быстрый ответ, сейчас буду разбираться, еще раз большое спасибо. 0

@YuriiM 0 / 0 / 0 Регистрация: 07.11.2023 Сообщений: 29
	06.12.2024, 12:42 [ТС]
	Здравствуйте voraa, огромное вам спасибо за помощь. Если можно подскажите как в play сделать чтобы последняя фотография из массива оставалась увеличенной и не исчезала. Спасибо. 0

@voraa 1244 / 1145 / 178 Регистрация: 21.01.2024 Сообщений: 5,274
	09.12.2024, 09:36
	Ну просто в next и play проверять, если curimg === images.length - 1, то ничего не делать и сразу return. 0

@YuriiM 0 / 0 / 0 Регистрация: 07.11.2023 Сообщений: 29
	12.12.2024, 15:50 [ТС]
	К сожалению не получается прописать условие для play, должен признаться моих знаний не хватает, javascript знаю на уровне элементарной математики, ваш код понимаю только интуитивно. Помогите мне закончить мой проект. Спасибо. 0

@YuriiM 0 / 0 / 0 Регистрация: 07.11.2023 Сообщений: 29
	12.12.2024, 16:35 [ТС]
	Спасибо большое, все работает как задумано. 0