2015-06-10 2 views
0

Доброе утро всем!Как изменить таймаут в javascript динамически

У меня вопрос, я не уверен, на каком языке я действительно должен пользоваться. Я предполагаю javascript, так как слайд-шоу - это javascript.

Мне нужно создать слайд-шоу, где пользователь может изменить время между слайдами. Есть около 100 слайдов, и они хотят иметь возможность устанавливать время между каждым отдельно.

Я поставил все фотографии на сервер и создал db со ссылками на них, и слайд-шоу работает отлично, за исключением того, что я не могу понять, как сделать тайм-аут разными значениями. Любая помощь приветствуется.

Вот код:

<?php include_once 'includes/db_connect.php'; 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Weather Show</title> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="responsiveslides.css"> 
<link rel="stylesheet" href="demo.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="responsiveslides.min.js"></script> 

<script type="text/javascript"> 
function display_c(){ 
    var refresh=1000; // Refresh rate in milli seconds 
    mytime=setTimeout('display_ct()',refresh) 
} 

function display_ct() { 
    var strcount 
    var x = new Date() 
    document.getElementById('ct').innerHTML = x; 
    tt=display_c(); 
} 
</script> 


<?php 
echo "<script> 
       $(function() { 
        $('#slider1').responsiveSlides({ 
         maxwidth: 1080, 
         speed: 1000, 
         timeout: 5000 
         }); 
        }); 
       </script>"; 

echo "</head> 
<body style='background-color: #000;' onload=display_ct();> 
<div id='wrapper'>"; 

$result = mysqli_query($mysqli,"SELECT * FROM weather WHERE status = '1'"); 
?> 

<!-- Slideshow 1 --> 
<ul class="rslides" id="slider1"> 
<?php while($row = mysqli_fetch_array($result)) 
    { 
     echo "<li><img src='"; echo $row['link']; echo "' alt='"; echo $row['link']; echo "'></li>"; 
    } 
    ?> 
</ul> 
</div><!-- end wrapper --> 

<div style=" margin-top:-30px; "> 
<span id='ct' style="font-weight:bold; font-size:36px; color:#FFF; margin-left:30px;"></span> 
</div> 


</body> 
</html> 

Я собирался использовать PHP переменные для времени, поэтому я просто эхо (ING) JavaScript. Для меня это не сработало. Поэтому, если кто-то знает, как это сделать и хочет сообщить мне, это было бы потрясающе! Спасибо!

+1

Вы можете добавить timout в изображение, например, Time-Timeout Затем прочитайте это значение после каждой скользящей анимации и проверьте, какое новое значение имеет активное изображение. Очистите тайм-аут и установите новый. – Gerton

+0

Вы не можете использовать настройку плагинов 'timeout', потому что он устанавливает интервал без ссылки. Вам нужно будет использовать метод «slideTo (idx)» плагина. – skobaljic

ответ

0

Вы можете сделать все это на стороне javascript, если вы поместите переменные refresh и mytime более глобальными. Следите за своим mytime -переменным (от display_c()). Добавьте поле редактирования и любое событие, которое необходимо отслеживать, чтобы указать новый интервал.

Как только это событие инициируется вызове clearTimeout(mytime);, чтобы остановить время, обновить переменную refresh с новым значением и вызвать display_c() снова, чтобы начать процесс заново:

<?php 
    $refresh = 1000; // Current value from database 
    echo <<<JAVAVSCRIPT 
    <script> 

    $(function() { 
     $('#slider1').responsiveSlides({ 
      maxwidth: 1080, 
      speed: $refresh, 
      timeout: 5000 
     }); 
    }); 

    $('#speed-input-id').change(function(e) { 
     refresh = parseInt($(this).val()); 
     $.ajax('/updateTheDatbaseTimeoutValueUrl', {data: {refresh: refresh}}); 
     // I can't help you on reconfiguring the plugin, too little information 
     updateTheResponsiveSlidesTimeout(refresh); 
     e.preventDefault(); 
    }); 
}); 
+0

ОК, я полный noob, когда дело доходит до javascript. У меня была такая работа с использованием переменной php, которую я получал от своего db. Единственная проблема, с которой я столкнулся, заключается в том, что она использовала бы только последнюю запись для всех временных интервалов. – salimagic

+0

Предполагая, что вы используете jQuery здесь, вы можете добавить вызов ajax для обновления вашего бэкэнд для начального значения. Я обновлю пример. – Blizz