custom delay in jQuery (cycle)
How to dynamically change the timeout of the cycle plugin
here is my attempt : page
here is the code :
<script type="text/javascript">
$(function() {
$('#delais').val(3);
$('#plus').click(function(){$('#delais').val(parseInt($("#delais").val()) + 1)});
$('#moins').click(function(){$('#delais').val(parseInt($("#delais").val()) - 1)});
startSlideshow(<?php echo json_encode(glob("*.jpg"));?>);
function startSlideshow(slides) {
$('#slideshow').append ('<img src="'+slides.shift()+'" />');
$('#slideshow').append ('<img src="'+slides.shift()+'" />');
// start slideshow
$('#slideshow').cycle({
fx: 'scrollHorz',
timeout: parseInt($('#delais').val()),
speed: 1500,
prev: '#prev',
next: '#next',
pager: '#nav',
before: onBefore
});
function onBefore(curr, next, opts, fwd) {
if (!opts.addSlide) return; // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
if (opts.slideCount == slides.length) return; // have we added all our 开发者_如何学运维slides?
opts.addSlide('<img src="'+slides.shift()+'" />');// add our next slide
};
};
});
</script>
<style type="text/css">
... some style...
</style>
</head>
<body>
<div id="dump"><?php var_dump( glob("*.jpg"));?></div>
<div id="buttons">
<input type="submit" id="prev" value="Précédent">
<input type="submit" id="next" value="Suivant">
<input type="submit" id="plus" value="+">
<input type="submit" id="moins" value="-">
delais : <input type="text" id="delais" value="3" size="3">secondes
</div>
<div id="slideshow"></div>
<div id="nav"></div>
</body>
</html>
here is the solution :
$('#slideshow').cycle({
fx: 'scrollHorz',
timeout: 3000,
speed: 1000,
prev: '#prev',
next: '#next',
pager: '#nav',
timeoutFn : calculateTimeout,
before: onBefore
});
function calculateTimeout() {
var timeout = $('#delais').val();
timeout = timeout * 1000;
return parseInt(timeout);
}
加载中,请稍侯......
精彩评论