Skip to main content
se eliminaron 6117 caracteres en el cuerpo
Origen Enlace

No estoy seguro si es lo que quieres hacer, pero echale un vistazo a este código aA ver si te ayuda, es un slidercorto... sacando solo de citasese que hice para un curso.te he puesto antes el código del carrusel con texto e imagen:

    <!doctype html>
<html>
<head><meta charset="utf-8"><title>CITAS</title> 
<link rel="stylesheet" type="text/css" href="css/citas_slide.css" />

<script type="text/javascript" src="javascript/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="javascript/galeria.js" ></script>
<script type="text/javascript" src="javascript/zepto.min.js" ></script>


<script type="text/javascript">
var t, actual;

function select(i){
   actual = i;
   galeria=JSON.parse(localStorage['citas']);
    
  $("nav a")
    .removeClass("on off")
    .addClass(function(j){return(j===i)?"on":"off";});

  $("#persona").html(galeria[i].persona);
  $("#frase").html(galeria[i].frase);
  $("#foto").attr("src", galeria[i].foto);

  clearTimeout(t);
  t = setTimeout( function(){select((i + 1) % galeria.length);}, 3000);
}

function generar_selector(){ // regenera la botonera
  galeria=JSON.parse(localStorage['citas']);
  var selector = $("#selector");

  selector.html("");
  
  galeria.forEach(function(elem,i) {
    selector.append("<li><a onClick='select("+i+")'></a></li>");
  });
}

$(function (){
  //creo una copia en local para ir modificando
  localStorage.citas =(localStorage.citas || JSON.stringify(galeria));
  //creo una copia del original en local para hacer refresh
  localStorage.original =(localStorage.original || JSON.stringify(galeria));
  generar_selector();

  $("#editar").on("click", function(){
    clearTimeout(t);
    
    $("#persona_d").html(galeria[actual].persona);
    $("#frase_d").html(galeria[actual].frase);
    $("#foto_d").html(galeria[actual].foto);

    $("#datos").css("display", "block");
    //la edición se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
  })


  $("#nuevo").on("click", function(){
    $("#datos").css("display", "none");

    actual = galeria.push({
       persona:$("#persona_d").html(),
       frase:$("#frase_d").html(),
       foto:$("#foto_d").html()
    }) - 1;

    //crear una nueva cita se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
    
    generar_selector();

    select(actual);
    
    
  })
  
  $("#borrar").on("click", function(){
    $("#datos").css("display", "none");

    galeria.splice(actual,1);
    
    //la eliminación se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);

    generar_selector();

    select(actual-1);
    
    
  })
  
  $("#guardar").on("click", function(){
    $("#datos").css("display", "none");

    actual = galeria.splice(actual,1,{
       persona:$("#persona_d").html(),
       frase:$("#frase_d").html(),
       foto:$("#foto_d").html()
    }) - 1;

    //el guardado se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
    
    generar_selector();

    select(0);
  })
  
  $("#reestablecer").on("click", function(){
    $("#datos").css("display", "none");
    
    if(confirm("¿Desea reestablecer los valores por defecto?")) {
        //recargo la galeria original y me posiciono en la 1 cita
        aux=JSON.parse(localStorage['original']);;
        localStorage.citas=JSON.stringify(aux);
        
        generar_selector();

        select(0);
    }
  })


  select(0);
});
</script>
</head>

<body>
<div class="contenido">
  <nav> 
    <ul id="selector"></ul>
  </nav>
  <section id="caja">
    <img id="foto" alt="" />
    <div class="textos">
      <p id="frase"></p>
      <p id="persona"></p>
    </div>
  </section>
  <div class="editar" id="editar"> 
    <img src="images/carat-d-white.svg" alt=""/>
  </div>
  <section id="datos">
    <div contentEditable="true" id="persona_d"></div>
    <div contentEditable="true" id="frase_d"></div>
    <div contentEditable="true" id="foto_d"></div>
    <div id="botones">
      <ul>
        <li><img src="images/edit-black.svg" alt="" id="guardar"/></li>
        <li><img src="images/plus-black.svg" alt="" id="nuevo"/></li>
        <li><img src="images/delete-black.svg" alt="" id="borrar"/></li>
        
      </ul>
    </div>
    <div id="botones">
      <hr>
      <ul>
        <li><img src="images/back-black.svg" alt="" id="reestablecer"/></li>
      </ul> 
    </div>
  </section>
  </div>
</body>
</html>

galeria.jsEsto es el html y el javascript

var galeria = [
 <!doctype html><html> { persona:"Buddha<head><meta charset="utf-8"><title>CITAS</title> बुद्धा",
     frase:"En la confrontación entre el arrollo y la roca, el arrollo siempre ganará, no por la fuerza, sino<link porrel="stylesheet" latype="text/css" persistenciahref="css/citas_slide.",
   css" />

<script foto:"http:type="text/javascript" src="javascript/wwwjquery-2.imagexia1.com/img/Cara-de-Buda4.jpg"min.js" ></script>
<script type="text/javascript" src="javascript/galeria.js" },></script>
 <script>
var t;

$(function (){ persona:"Khalil Gibran - جبران خليل جبران بن ميخائل بن سعد",
     frase:"El silencio del envidioso está lleno de ruidosgaleria."forEach(function(elem,
 i) {  
   foto:"http://www.hannaharendtcenter $("ul#selector").org/wp-content/uploads/2015append("<li><a onClick='select("+i+")'></05a></111.jpg"li>");
   },);

  select(0);
});

function select(i){ persona:"Confucio - 孔子",
     frase: "Todo tiene belleza pero no todo$("nav ela")
 mundo la puede ver.",
removeClass("on off")
    foto:"http://3.bp.blogspot.com/-VlsuMSoivLU/VeMlD-LymUI/AAAAAAABKPU/Q8PYwsFbqxg/s1600/confucio.jpeg"
   addClass(function(j){return(j===i)?"on":"off";},);
   
 { $("#persona").html(galeria[i].persona:"Lev Nikoláievich Tolstói - Лев Николаевич Толстой",);
     $("#frase").html(galeria[i].frase:"Mi felicidad consiste en que);
  apreciar$("#foto").attr("src", logaleria[i].foto);

 que tengoclearTimeout(t);
 y not deseo= consetTimeout( excesofunction(){select((i lo+ que1) no% tengogaleria."length);},
     foto:"http://malba.s3-website-sa-east-1.amazonaws.com/wp-content/uploads/20142000);
}
</09script>
</tolstoi-05.jpg"head>
   },
   { persona:"Platón - Πλάτων",<body>
  <div class="contenido">
  frase:"El<nav> más 
 importante y principal negocio<ul públicoid="selector"></ul>
 es la</nav>
 buena educación<section deid="caja">
 la juventud.",
  <img id="foto" alt="" foto:"https://s-media-cache-ak0.pinimg.com/236x/ee/c4/f3/eec4f3420f7024c58f1b44de233d8ecd.jpg">
   },
 <div class="textos">
 { persona:"Henrik Ibsen - hɛnɾɪk ˈjoːhɑn<p ˈɪpsən",id="frase"></p>
     frase:"Si dudas de ti<p mismo,id="persona"></p>
 estás vencido de antemano.",</div>
     foto:"https://ebooks.adelaide.edu.au/i/ibsen/henrik/gosse</imagessection>
</bust2.jpg"div>
   }</body>
];</html>

CSSy en este documento de javascript es donde cargas el texto y la url de la imagen que vas a mostrar, en tu caso sería el logotipo (creo)

body {
    margin:0;
    padding:0;
  var galeria background-color:#ccc;
}
img= {[
    vertical-align:bottom;  
}
.contenido {
    position:relative;
    background-color:#000;
    height:427px;
    widthpersona:100%;
   "Buddha min-width:640px;
}
#caja {बुद्धा",
    position:relative;
    text-alignfrase:right;
"En la confrontación entre width:100%;
el arrollo y la height:100%;
}
#foto{
roca, el arrollo siempre height:100%;
ganará, no por la max-height:427px;
fuerza, sino por la width:auto;
}
persistencia.textos {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 50%;
    color: #FFFFFF;
    font-family: Helvetica, Arial", sans-serif;
    font-size: large;
}
#persona {
    font-style: italic;
}
nav {
    position:absolute;
    width:100%;
    bottom:10px;
    z-index:100;
}
nav ul {
    list-style-type:none;
    padding:0;
    margin:0;
    display:flex;
    flex-flow: row;
    justify-content: space-between;
    width:100px;
    margin-left:auto;
    margin-right:auto;
}
nav a {
    display:block;
    width:10px;
    height:10px;
    background-colorfoto: white;
    border-radius"http:50%;
}
nav a//www.on{
    background-color: orange;
}
nav aimagexia.off{
    backgroundcom/img/Cara-color: white;
}
nav a:hover {
    backgroundde-color: red;
}
Buda.contenido #datos {
    margin-top:5vh;
    margin-left: 10%;
    margin-right:10%;jpg"
    display:none;
},
.contenido #datos div {
    paddingpersona: 0.5em;
  "Khalil Gibran background-color: #D4D4D4;
    border: 1px solid #000000;
    margin-bottom:0.2em;
}
.editarجبران {
خليل جبران بن ميخائل background-color:بن #626262;سعد",
    padding: 0.2em;
    text-alignfrase: right;
 "El silencio del height:28px;
envidioso está lleno de cursor:pointer;
}
ruidos.editar img {",
    padding: 6px;
    border-radius:50%;
}
.editarfoto:hover > img {
    background-color"http: #000000;
}
//www.contenido #datos div#botones {
    border: 1px none #000000;
    background-color:#ccc;
}
div #botones ul {
    margin:0;
    padding:0;
    list-style-type:none;
    display:flex;
    flex-direction: row;
    justifyhannaharendtcenter.org/wp-content: flex-end;
}
div #botones ul li {
}
div #botones ul li img {
    width:20px;
    height:20px;
    padding: 0/uploads/2015/05/111.3em;
    border-radius:50%;
    background-color: #626262;jpg"
    margin-right:0.3em;
}
div #botones ul li img:hover {
    background-color: white;
}];

EsperoEsta vez solo te he puesto dos frases para que veas como se carga el array que luego vas a leer desde el javascript. Si no quieres que aparezca la foto o alguno de los dos textos solo tienes que borrar donde ponga persona, frase o foto depende de lo que no quieras que aparezca, si necesitas el css dimelo y te ayudelo pongo tambien, aunque creo que lo que quieres hacer, tendrás que crearte el tuyo propio

un saludo.

No estoy seguro si es lo que quieres hacer, pero echale un vistazo a este código a ver si te ayuda, es un slider de citas que hice para un curso.

    <!doctype html>
<html>
<head><meta charset="utf-8"><title>CITAS</title> 
<link rel="stylesheet" type="text/css" href="css/citas_slide.css" />

<script type="text/javascript" src="javascript/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="javascript/galeria.js" ></script>
<script type="text/javascript" src="javascript/zepto.min.js" ></script>


<script type="text/javascript">
var t, actual;

function select(i){
   actual = i;
   galeria=JSON.parse(localStorage['citas']);
    
  $("nav a")
    .removeClass("on off")
    .addClass(function(j){return(j===i)?"on":"off";});

  $("#persona").html(galeria[i].persona);
  $("#frase").html(galeria[i].frase);
  $("#foto").attr("src", galeria[i].foto);

  clearTimeout(t);
  t = setTimeout( function(){select((i + 1) % galeria.length);}, 3000);
}

function generar_selector(){ // regenera la botonera
  galeria=JSON.parse(localStorage['citas']);
  var selector = $("#selector");

  selector.html("");
  
  galeria.forEach(function(elem,i) {
    selector.append("<li><a onClick='select("+i+")'></a></li>");
  });
}

$(function (){
  //creo una copia en local para ir modificando
  localStorage.citas =(localStorage.citas || JSON.stringify(galeria));
  //creo una copia del original en local para hacer refresh
  localStorage.original =(localStorage.original || JSON.stringify(galeria));
  generar_selector();

  $("#editar").on("click", function(){
    clearTimeout(t);
    
    $("#persona_d").html(galeria[actual].persona);
    $("#frase_d").html(galeria[actual].frase);
    $("#foto_d").html(galeria[actual].foto);

    $("#datos").css("display", "block");
    //la edición se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
  })


  $("#nuevo").on("click", function(){
    $("#datos").css("display", "none");

    actual = galeria.push({
       persona:$("#persona_d").html(),
       frase:$("#frase_d").html(),
       foto:$("#foto_d").html()
    }) - 1;

    //crear una nueva cita se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
    
    generar_selector();

    select(actual);
    
    
  })
  
  $("#borrar").on("click", function(){
    $("#datos").css("display", "none");

    galeria.splice(actual,1);
    
    //la eliminación se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);

    generar_selector();

    select(actual-1);
    
    
  })
  
  $("#guardar").on("click", function(){
    $("#datos").css("display", "none");

    actual = galeria.splice(actual,1,{
       persona:$("#persona_d").html(),
       frase:$("#frase_d").html(),
       foto:$("#foto_d").html()
    }) - 1;

    //el guardado se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
    
    generar_selector();

    select(0);
  })
  
  $("#reestablecer").on("click", function(){
    $("#datos").css("display", "none");
    
    if(confirm("¿Desea reestablecer los valores por defecto?")) {
        //recargo la galeria original y me posiciono en la 1 cita
        aux=JSON.parse(localStorage['original']);;
        localStorage.citas=JSON.stringify(aux);
        
        generar_selector();

        select(0);
    }
  })


  select(0);
});
</script>
</head>

<body>
<div class="contenido">
  <nav> 
    <ul id="selector"></ul>
  </nav>
  <section id="caja">
    <img id="foto" alt="" />
    <div class="textos">
      <p id="frase"></p>
      <p id="persona"></p>
    </div>
  </section>
  <div class="editar" id="editar"> 
    <img src="images/carat-d-white.svg" alt=""/>
  </div>
  <section id="datos">
    <div contentEditable="true" id="persona_d"></div>
    <div contentEditable="true" id="frase_d"></div>
    <div contentEditable="true" id="foto_d"></div>
    <div id="botones">
      <ul>
        <li><img src="images/edit-black.svg" alt="" id="guardar"/></li>
        <li><img src="images/plus-black.svg" alt="" id="nuevo"/></li>
        <li><img src="images/delete-black.svg" alt="" id="borrar"/></li>
        
      </ul>
    </div>
    <div id="botones">
      <hr>
      <ul>
        <li><img src="images/back-black.svg" alt="" id="reestablecer"/></li>
      </ul> 
    </div>
  </section>
  </div>
</body>
</html>

galeria.js

var galeria = [
   { persona:"Buddha - बुद्धा",
     frase:"En la confrontación entre el arrollo y la roca, el arrollo siempre ganará, no por la fuerza, sino por la persistencia.",
     foto:"http://www.imagexia.com/img/Cara-de-Buda.jpg"
   },
   { persona:"Khalil Gibran - جبران خليل جبران بن ميخائل بن سعد",
     frase:"El silencio del envidioso está lleno de ruidos.",
      foto:"http://www.hannaharendtcenter.org/wp-content/uploads/2015/05/111.jpg"
   },
   { persona:"Confucio - 孔子",
     frase: "Todo tiene belleza pero no todo el mundo la puede ver.",
     foto:"http://3.bp.blogspot.com/-VlsuMSoivLU/VeMlD-LymUI/AAAAAAABKPU/Q8PYwsFbqxg/s1600/confucio.jpeg"
   },
   { persona:"Lev Nikoláievich Tolstói - Лев Николаевич Толстой",
     frase:"Mi felicidad consiste en que  apreciar lo que tengo y no deseo con exceso lo que no tengo.",
     foto:"http://malba.s3-website-sa-east-1.amazonaws.com/wp-content/uploads/2014/09/tolstoi-05.jpg"
   },
   { persona:"Platón - Πλάτων",
     frase:"El más importante y principal negocio público es la buena educación de la juventud.",
     foto:"https://s-media-cache-ak0.pinimg.com/236x/ee/c4/f3/eec4f3420f7024c58f1b44de233d8ecd.jpg"
   },
   { persona:"Henrik Ibsen - hɛnɾɪk ˈjoːhɑn ˈɪpsən",
     frase:"Si dudas de ti mismo, estás vencido de antemano.",
     foto:"https://ebooks.adelaide.edu.au/i/ibsen/henrik/gosse/images/bust2.jpg"
   }
];

CSS

body {
    margin:0;
    padding:0;
    background-color:#ccc;
}
img {
    vertical-align:bottom;  
}
.contenido {
    position:relative;
    background-color:#000;
    height:427px;
    width:100%;
    min-width:640px;
}
#caja {
    position:relative;
    text-align:right;
    width:100%;
    height:100%;
}
#foto{
    height:100%;
    max-height:427px;
    width:auto;
}
.textos {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 50%;
    color: #FFFFFF;
    font-family: Helvetica, Arial, sans-serif;
    font-size: large;
}
#persona {
    font-style: italic;
}
nav {
    position:absolute;
    width:100%;
    bottom:10px;
    z-index:100;
}
nav ul {
    list-style-type:none;
    padding:0;
    margin:0;
    display:flex;
    flex-flow: row;
    justify-content: space-between;
    width:100px;
    margin-left:auto;
    margin-right:auto;
}
nav a {
    display:block;
    width:10px;
    height:10px;
    background-color: white;
    border-radius:50%;
}
nav a.on{
    background-color: orange;
}
nav a.off{
    background-color: white;
}
nav a:hover {
    background-color: red;
}
.contenido #datos {
    margin-top:5vh;
    margin-left: 10%;
    margin-right:10%;
    display:none;
}
.contenido #datos div {
    padding: 0.5em;
    background-color: #D4D4D4;
    border: 1px solid #000000;
    margin-bottom:0.2em;
}
.editar {
    background-color: #626262;
    padding: 0.2em;
    text-align: right;
    height:28px;
    cursor:pointer;
}
.editar img {
    padding: 6px;
    border-radius:50%;
}
.editar:hover > img {
    background-color: #000000;
}
.contenido #datos div#botones {
    border: 1px none #000000;
    background-color:#ccc;
}
div #botones ul {
    margin:0;
    padding:0;
    list-style-type:none;
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
}
div #botones ul li {
}
div #botones ul li img {
    width:20px;
    height:20px;
    padding: 0.3em;
    border-radius:50%;
    background-color: #626262;
    margin-right:0.3em;
}
div #botones ul li img:hover {
    background-color: white;
}

Espero que te ayude, un saludo.

A ver, corto... sacando solo de ese que te he puesto antes el código del carrusel con texto e imagen:

Esto es el html y el javascript

<!doctype html><html>  <head><meta charset="utf-8"><title>CITAS</title> 
<link rel="stylesheet" type="text/css" href="css/citas_slide.css" />

<script type="text/javascript" src="javascript/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="javascript/galeria.js" ></script>
<script>
var t;

$(function (){
  galeria.forEach(function(elem,i) {  
    $("ul#selector").append("<li><a onClick='select("+i+")'></a></li>");
  });

  select(0);
});

function select(i){
  $("nav a")
    .removeClass("on off")
    .addClass(function(j){return(j===i)?"on":"off";});
 
  $("#persona").html(galeria[i].persona);
  $("#frase").html(galeria[i].frase);
  $("#foto").attr("src", galeria[i].foto);

  clearTimeout(t);
  t = setTimeout( function(){select((i + 1) % galeria.length);}, 2000);
}
</script>
</head>

<body>
<div class="contenido">
  <nav>  
    <ul id="selector"></ul>
  </nav>
  <section id="caja">
    <img id="foto" alt="" />
    <div class="textos">
      <p id="frase"></p>
      <p id="persona"></p>
    </div>
  </section>
</div>
</body>
</html>

y en este documento de javascript es donde cargas el texto y la url de la imagen que vas a mostrar, en tu caso sería el logotipo (creo)

var galeria = [
   { persona:"Buddha - बुद्धा",
     frase:"En la confrontación entre el arrollo y la roca, el arrollo siempre ganará, no por la fuerza, sino por la persistencia.",
     foto:"http://www.imagexia.com/img/Cara-de-Buda.jpg"
   },
   { persona:"Khalil Gibran - جبران خليل جبران بن ميخائل بن سعد",
     frase:"El silencio del envidioso está lleno de ruidos.",
     foto:"http://www.hannaharendtcenter.org/wp-content/uploads/2015/05/111.jpg"
   }
];

Esta vez solo te he puesto dos frases para que veas como se carga el array que luego vas a leer desde el javascript. Si no quieres que aparezca la foto o alguno de los dos textos solo tienes que borrar donde ponga persona, frase o foto depende de lo que no quieras que aparezca, si necesitas el css dimelo y te lo pongo tambien, aunque creo que lo que quieres hacer, tendrás que crearte el tuyo propio

un saludo

Origen Enlace

No estoy seguro si es lo que quieres hacer, pero echale un vistazo a este código a ver si te ayuda, es un slider de citas que hice para un curso.

    <!doctype html>
<html>
<head><meta charset="utf-8"><title>CITAS</title> 
<link rel="stylesheet" type="text/css" href="css/citas_slide.css" />

<script type="text/javascript" src="javascript/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="javascript/galeria.js" ></script>
<script type="text/javascript" src="javascript/zepto.min.js" ></script>


<script type="text/javascript">
var t, actual;

function select(i){
   actual = i;
   galeria=JSON.parse(localStorage['citas']);
    
  $("nav a")
    .removeClass("on off")
    .addClass(function(j){return(j===i)?"on":"off";});

  $("#persona").html(galeria[i].persona);
  $("#frase").html(galeria[i].frase);
  $("#foto").attr("src", galeria[i].foto);

  clearTimeout(t);
  t = setTimeout( function(){select((i + 1) % galeria.length);}, 3000);
}

function generar_selector(){ // regenera la botonera
  galeria=JSON.parse(localStorage['citas']);
  var selector = $("#selector");

  selector.html("");
  
  galeria.forEach(function(elem,i) {
    selector.append("<li><a onClick='select("+i+")'></a></li>");
  });
}

$(function (){
  //creo una copia en local para ir modificando
  localStorage.citas =(localStorage.citas || JSON.stringify(galeria));
  //creo una copia del original en local para hacer refresh
  localStorage.original =(localStorage.original || JSON.stringify(galeria));
  generar_selector();

  $("#editar").on("click", function(){
    clearTimeout(t);
    
    $("#persona_d").html(galeria[actual].persona);
    $("#frase_d").html(galeria[actual].frase);
    $("#foto_d").html(galeria[actual].foto);

    $("#datos").css("display", "block");
    //la edición se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
  })


  $("#nuevo").on("click", function(){
    $("#datos").css("display", "none");

    actual = galeria.push({
       persona:$("#persona_d").html(),
       frase:$("#frase_d").html(),
       foto:$("#foto_d").html()
    }) - 1;

    //crear una nueva cita se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
    
    generar_selector();

    select(actual);
    
    
  })
  
  $("#borrar").on("click", function(){
    $("#datos").css("display", "none");

    galeria.splice(actual,1);
    
    //la eliminación se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);

    generar_selector();

    select(actual-1);
    
    
  })
  
  $("#guardar").on("click", function(){
    $("#datos").css("display", "none");

    actual = galeria.splice(actual,1,{
       persona:$("#persona_d").html(),
       frase:$("#frase_d").html(),
       foto:$("#foto_d").html()
    }) - 1;

    //el guardado se realiza sobre galería y se guarda en local
    localStorage.citas=JSON.stringify(galeria);
    
    generar_selector();

    select(0);
  })
  
  $("#reestablecer").on("click", function(){
    $("#datos").css("display", "none");
    
    if(confirm("¿Desea reestablecer los valores por defecto?")) {
        //recargo la galeria original y me posiciono en la 1 cita
        aux=JSON.parse(localStorage['original']);;
        localStorage.citas=JSON.stringify(aux);
        
        generar_selector();

        select(0);
    }
  })


  select(0);
});
</script>
</head>

<body>
<div class="contenido">
  <nav> 
    <ul id="selector"></ul>
  </nav>
  <section id="caja">
    <img id="foto" alt="" />
    <div class="textos">
      <p id="frase"></p>
      <p id="persona"></p>
    </div>
  </section>
  <div class="editar" id="editar"> 
    <img src="images/carat-d-white.svg" alt=""/>
  </div>
  <section id="datos">
    <div contentEditable="true" id="persona_d"></div>
    <div contentEditable="true" id="frase_d"></div>
    <div contentEditable="true" id="foto_d"></div>
    <div id="botones">
      <ul>
        <li><img src="images/edit-black.svg" alt="" id="guardar"/></li>
        <li><img src="images/plus-black.svg" alt="" id="nuevo"/></li>
        <li><img src="images/delete-black.svg" alt="" id="borrar"/></li>
        
      </ul>
    </div>
    <div id="botones">
      <hr>
      <ul>
        <li><img src="images/back-black.svg" alt="" id="reestablecer"/></li>
      </ul> 
    </div>
  </section>
  </div>
</body>
</html>

galeria.js

var galeria = [
   { persona:"Buddha - बुद्धा",
     frase:"En la confrontación entre el arrollo y la roca, el arrollo siempre ganará, no por la fuerza, sino por la persistencia.",
     foto:"http://www.imagexia.com/img/Cara-de-Buda.jpg"
   },
   { persona:"Khalil Gibran - جبران خليل جبران بن ميخائل بن سعد",
     frase:"El silencio del envidioso está lleno de ruidos.",
     foto:"http://www.hannaharendtcenter.org/wp-content/uploads/2015/05/111.jpg"
   },
   { persona:"Confucio - 孔子",
     frase: "Todo tiene belleza pero no todo el mundo la puede ver.",
     foto:"http://3.bp.blogspot.com/-VlsuMSoivLU/VeMlD-LymUI/AAAAAAABKPU/Q8PYwsFbqxg/s1600/confucio.jpeg"
   },
   { persona:"Lev Nikoláievich Tolstói - Лев Николаевич Толстой",
     frase:"Mi felicidad consiste en que sé apreciar lo que tengo y no deseo con exceso lo que no tengo.",
     foto:"http://malba.s3-website-sa-east-1.amazonaws.com/wp-content/uploads/2014/09/tolstoi-05.jpg"
   },
   { persona:"Platón - Πλάτων",
     frase:"El más importante y principal negocio público es la buena educación de la juventud.",
     foto:"https://s-media-cache-ak0.pinimg.com/236x/ee/c4/f3/eec4f3420f7024c58f1b44de233d8ecd.jpg"
   },
   { persona:"Henrik Ibsen - hɛnɾɪk ˈjoːhɑn ˈɪpsən",
     frase:"Si dudas de ti mismo, estás vencido de antemano.",
     foto:"https://ebooks.adelaide.edu.au/i/ibsen/henrik/gosse/images/bust2.jpg"
   }
];

CSS

body {
    margin:0;
    padding:0;
    background-color:#ccc;
}
img {
    vertical-align:bottom;  
}
.contenido {
    position:relative;
    background-color:#000;
    height:427px;
    width:100%;
    min-width:640px;
}
#caja {
    position:relative;
    text-align:right;
    width:100%;
    height:100%;
}
#foto{
    height:100%;
    max-height:427px;
    width:auto;
}
.textos {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 50%;
    color: #FFFFFF;
    font-family: Helvetica, Arial, sans-serif;
    font-size: large;
}
#persona {
    font-style: italic;
}
nav {
    position:absolute;
    width:100%;
    bottom:10px;
    z-index:100;
}
nav ul {
    list-style-type:none;
    padding:0;
    margin:0;
    display:flex;
    flex-flow: row;
    justify-content: space-between;
    width:100px;
    margin-left:auto;
    margin-right:auto;
}
nav a {
    display:block;
    width:10px;
    height:10px;
    background-color: white;
    border-radius:50%;
}
nav a.on{
    background-color: orange;
}
nav a.off{
    background-color: white;
}
nav a:hover {
    background-color: red;
}
.contenido #datos {
    margin-top:5vh;
    margin-left: 10%;
    margin-right:10%;
    display:none;
}
.contenido #datos div {
    padding: 0.5em;
    background-color: #D4D4D4;
    border: 1px solid #000000;
    margin-bottom:0.2em;
}
.editar {
    background-color: #626262;
    padding: 0.2em;
    text-align: right;
    height:28px;
    cursor:pointer;
}
.editar img {
    padding: 6px;
    border-radius:50%;
}
.editar:hover > img {
    background-color: #000000;
}
.contenido #datos div#botones {
    border: 1px none #000000;
    background-color:#ccc;
}
div #botones ul {
    margin:0;
    padding:0;
    list-style-type:none;
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
}
div #botones ul li {
}
div #botones ul li img {
    width:20px;
    height:20px;
    padding: 0.3em;
    border-radius:50%;
    background-color: #626262;
    margin-right:0.3em;
}
div #botones ul li img:hover {
    background-color: white;
}

Espero que te ayude, un saludo.