¿Qué tal un enfoque diferente: a quién le importa el tiempo? (No va a sincronizar de manera confiable el reloj del sistema con JavaScript.)
En su lugar, utilice un servidor Node con socket.io para sincronizar cuando sus clientes avancen la presentación de diapositivas. En lugar de que los clientes decidan cuándo avanzar, el servidor les dice que lo hagan.
Este enfoque viene con la ventaja añadida de poder manipular manualmente la presentación de diapositivas mientras se está ejecutando. En el ejemplo que sigue, he agregado un botón Next que hace que todos los clientes conectados avancen inmediatamente a la siguiente diapositiva.
aplicación.js
var express = require('express')
, app = express.createServer()
, io = require('socket.io').listen(app)
, doT = require('dot')
, slide = 0
, slides = [
'http://placekitten.com/700/400?image=13',
'http://placekitten.com/700/400?image=14',
'http://placekitten.com/700/400?image=15',
'http://placekitten.com/700/400?image=16',
'http://placekitten.com/700/400?image=1',
'http://placekitten.com/700/400?image=2',
'http://placekitten.com/700/400?image=3',
'http://placekitten.com/700/400?image=4',
'http://placekitten.com/700/400?image=5',
'http://placekitten.com/700/400?image=6',
'http://placekitten.com/700/400?image=7',
'http://placekitten.com/700/400?image=8',
'http://placekitten.com/700/400?image=9',
'http://placekitten.com/700/400?image=10',
'http://placekitten.com/700/400?image=11',
'http://placekitten.com/700/400?image=12',
];
app.listen(70); // listen on port 70
app.register('.html', doT); // use doT to render templates
app.set('view options', {layout:false}); // keep it simple
doT.templateSettings.strip=false; // don't strip line endings from template file
app.get('/', function(req, res) {
res.render('index.html', { slide: slide, slides: slides });
});
app.post('/next', function(req, res) {
next();
res.send(204); // No Content
});
setInterval(next, 4000); // advance slides every 4 seconds
function next() {
if (++slide >= slides.length) slide = 0;
io.sockets.emit('slide', slide);
}
vistas/index.html
Este archivo se procesa como una plantilla doT.
<!DOCTYPE html>
<html>
<head>
<title>Synchronized Slideshow</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var curslide = {{=it.slide}}; // the slide the server is currently on.
$(function() {
$('#slide' + curslide).css('left',0);
$('#next').click(function() {
$.post('/next');
});
});
var socket = io.connect('http://localhost:70');
socket.on('slide', function(slide) {
$('#slide' + curslide).animate({left:-700}, 400);
$('#slide' + slide).css('left',700).show().animate({left:0}, 400);
curslide = slide;
});
</script>
<style>
#slideshow, .slide { width:700px; height:400px; overflow:hidden; position:relative; }
.slide { position:absolute; top:0px; left:700px; }
</style>
</head>
<body>
<div id="slideshow">
{{~it.slides :url:i}}
<div id="slide{{=i}}" class="slide"><img src="{{=url}}"></div>
{{~}}
</div>
<button id="next">Next ></button>
</body>
</html>
copia estos dos archivos en una carpeta, a continuación, ejecute
$ npm install express socket.io dot
$ node app.js
y vaya a http://localhost:70 en varias ventanas diferentes, a continuación, ver la magia.
¡Me encanta esta respuesta! Ignorando mi pregunta para llegar al mismo objetivo. Voy a tomar este enfoque y ver qué puedo sacar de eso. –
¡Y felicitaciones por el enlace de demostración! –
Tengo un par de errores al ejecutar esto con la última versión de Express. Solo cuando lo fijé en la versión 2.5.10 y lo reinstalé, funcionó. Además, tuve que ejecutar 'sudo node app.js' – skube