PHP Lang
  1. PHP Lang
  3. Javascript – Как добавить кнопку паузы в карусель?
Intereting Posts
Как разбивать строки в цикле foreach с помощью PHP как получить индекс родительского массива из многомерного массива в php Php создать zip-файл (из post attachments wordpress) PHP MYSQL Не удалось выполнить запрос: Неизвестный столбец DOMDocument и XPath, URL не передан Счет электронной почты WooCommerce: условные «политики» на основе категории продуктов Как настроить сообщения об ошибках регулярного выражения Zend_Form? Получить определенный узел в xml? Процесс виртуализации PHP – получение родительского вывода в родительском Где я могу найти контрольный список безопасности для веб-проектов? Как я могу генерировать динамические диаграммы с данными MySQL? cookiejar в PHP Curl CodeIgniter session set-cookie duplicated – как решить каталогов без индексного файла Как поймать сигнал KILL или HUP или пользовательский прерывание?

Javascript – Как добавить кнопку паузы в карусель?

Я нашел этот скрипт в Magento, который вращает изображения из определенного каталога. Это работает нормально. Но мне нужно добавить кнопку «пауза» после «1-6». Я не эксперт по javascript, поэтому не знаю, как это сделать. Может кто-нибудь, пожалуйста, помогите мне с этим?

Код: 

<?php $speed = 5000;//miliseconds ?> <script type="text/javascript"> var timeoutID; homeTileCount = 1; $$('.home-tile-container img').each(function(e){ $(e).writeAttribute('id','home-tile-' + homeTileCount); $(e).addClassName('home-tile'); homeTileCount++; }); homeTileCount--; var homeTileRemote = $$('.home-tile-remote')[0]; for (i=homeTileCount;i>=1;i--) homeTileRemote.insert('<div id="home-tile-remote-'+i+'" class="overflow"><a href="#" onclick="switchTile('+i+');return false">'+i+'</a></div>'); function switchTile(n) { //console.log(n); clearTimeout(timeoutID); $$('.home-tile-container img').each(function(e){ e.removeClassName('home-tile-active'); }); $$('.home-tile-remote > div').each(function(e){ e.removeClassName('home-tile-remote-active'); }); $('home-tile-remote-'+n).addClassName('home-tile-remote-active'); $('home-tile-'+n).addClassName('home-tile-active'); next = n+1; if (next > homeTileCount) next = 1; timeoutID = setTimeout('switchTile('+next+')', <?=$speed?>); } switchTile(1); setTimeout('switchTile(2)', <?=$speed?>); </script>

И вот как выглядит карусель: введите описание изображения здесь

Solutions Collecting From Web of "Javascript – Как добавить кнопку паузы в карусель?"

Может быть, это: 

 <?php $speed = 5000;//miliseconds ?> <script type="text/javascript"> var paused=false; var timeoutID; homeTileCount = 1; $$('.home-tile-container img').each(function(e){ $(e).writeAttribute('id','home-tile-' + homeTileCount); $(e).addClassName('home-tile'); homeTileCount++; }); homeTileCount--; var homeTileRemote = $$('.home-tile-remote')[0]; for (i=homeTileCount;i>=1;i--) homeTileRemote.insert('<div id="home-tile-remote-'+i+'" class="overflow"><a href="#" onclick="switchTile('+i+');return false">'+i+'</a></div>'); function switchTile(n) { if (!paused) { //console.log(n); clearTimeout(timeoutID); $$('.home-tile-container img').each(function(e){ e.removeClassName('home-tile-active'); }); $$('.home-tile-remote > div').each(function(e){ e.removeClassName('home-tile-remote-active'); }); $('home-tile-remote-'+n).addClassName('home-tile-remote-active'); $('home-tile-'+n).addClassName('home-tile-active'); next = n+1; if (next > homeTileCount) next = 1; timeoutID = setTimeout('switchTile('+next+')', <?=$speed?>); } } switchTile(1); setTimeout('switchTile(2)', <?=$speed?>); </script> <button type="button" onclick="paused=true;">Pause</button> с <?php $speed = 5000;//miliseconds ?> <script type="text/javascript"> var paused=false; var timeoutID; homeTileCount = 1; $$('.home-tile-container img').each(function(e){ $(e).writeAttribute('id','home-tile-' + homeTileCount); $(e).addClassName('home-tile'); homeTileCount++; }); homeTileCount--; var homeTileRemote = $$('.home-tile-remote')[0]; for (i=homeTileCount;i>=1;i--) homeTileRemote.insert('<div id="home-tile-remote-'+i+'" class="overflow"><a href="#" onclick="switchTile('+i+');return false">'+i+'</a></div>'); function switchTile(n) { if (!paused) { //console.log(n); clearTimeout(timeoutID); $$('.home-tile-container img').each(function(e){ e.removeClassName('home-tile-active'); }); $$('.home-tile-remote > div').each(function(e){ e.removeClassName('home-tile-remote-active'); }); $('home-tile-remote-'+n).addClassName('home-tile-remote-active'); $('home-tile-'+n).addClassName('home-tile-active'); next = n+1; if (next > homeTileCount) next = 1; timeoutID = setTimeout('switchTile('+next+')', <?=$speed?>); } } switchTile(1); setTimeout('switchTile(2)', <?=$speed?>); </script> <button type="button" onclick="paused=true;">Pause</button> с <?php $speed = 5000;//miliseconds ?> <script type="text/javascript"> var paused=false; var timeoutID; homeTileCount = 1; $$('.home-tile-container img').each(function(e){ $(e).writeAttribute('id','home-tile-' + homeTileCount); $(e).addClassName('home-tile'); homeTileCount++; }); homeTileCount--; var homeTileRemote = $$('.home-tile-remote')[0]; for (i=homeTileCount;i>=1;i--) homeTileRemote.insert('<div id="home-tile-remote-'+i+'" class="overflow"><a href="#" onclick="switchTile('+i+');return false">'+i+'</a></div>'); function switchTile(n) { if (!paused) { //console.log(n); clearTimeout(timeoutID); $$('.home-tile-container img').each(function(e){ e.removeClassName('home-tile-active'); }); $$('.home-tile-remote > div').each(function(e){ e.removeClassName('home-tile-remote-active'); }); $('home-tile-remote-'+n).addClassName('home-tile-remote-active'); $('home-tile-'+n).addClassName('home-tile-active'); next = n+1; if (next > homeTileCount) next = 1; timeoutID = setTimeout('switchTile('+next+')', <?=$speed?>); } } switchTile(1); setTimeout('switchTile(2)', <?=$speed?>); </script> <button type="button" onclick="paused=true;">Pause</button>