Wikipedia para siempre
ShareCodeTreeCode

Goose, la red social libre

PleasOn - Menu QR
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

HTMLCSSJSVista previa
1 <h1>Graphic slider</h1>2 3 <div class="GraphicSlider" id="GraphicSlider-1" data-length="8" data-position="0">4  <div class="GraphicSlider-position">5  <div class="GraphicSlider-position-item selected" id="GraphicSliderPositionItem-1-0">O</div>6  <div class="GraphicSlider-position-item" id="GraphicSliderPositionItem-1-1">O</div>7  <div class="GraphicSlider-position-item" id="GraphicSliderPositionItem-1-2">O</div>8  <div class="GraphicSlider-position-item" id="GraphicSliderPositionItem-1-3">O</div>9  <div class="GraphicSlider-position-item" id="GraphicSliderPositionItem-1-4">O</div>10  <div class="GraphicSlider-position-item" id="GraphicSliderPositionItem-1-5">O</div>11  <div class="GraphicSlider-position-item" id="GraphicSliderPositionItem-1-6">O</div>12  <div class="GraphicSlider-position-item" id="GraphicSliderPositionItem-1-7">O</div>13  </div>14  <div class="GraphicSlider-arrow-frame left">15  <div class="GraphicSlider-arrow" id="GraphicSliderArrowLeft-1">16  ARROW LEFT17  </div>18  </div>19  <div class="GraphicSlider-arrow-frame right">20  <div class="GraphicSlider-arrow" id="GraphicSliderArrowRight-1">21  ARROW right22  </div>23  </div>24  <div class="GraphicSlider-frame">25  <div class="GraphicSlider-roll" id="GraphicSliderRoll-1">26  <div class="GraphicSlider-slide">PRE27  </div><div class="GraphicSlider-slide">Slide 128  </div><div class="GraphicSlider-slide">Slide 229  </div><div class="GraphicSlider-slide">Slide 330  </div><div class="GraphicSlider-slide">Slide 431  </div><div class="GraphicSlider-slide">Slide 532  </div><div class="GraphicSlider-slide">Slide 633  </div><div class="GraphicSlider-slide">Slide 734  </div><div class="GraphicSlider-slide">Slide 835  </div><div class="GraphicSlider-slide">POST36  </div>37  </div>38 39 40 41  </div>42 </div>43 44 <script type="text/javascript">45 46 function GraphicSlider(id) {47  48  var dom = document.getElementById("GraphicSlider-"+id);49  var length = parseInt(dom.getAttribute('data-length'));50  var position = parseInt(dom.getAttribute('data-position'));51  var roll = document.getElementById("GraphicSliderRoll-"+id);52  var arrow_left = document.getElementById("GraphicSliderArrowLeft-"+id);53  var arrow_right = document.getElementById("GraphicSliderArrowRight-"+id);54  55  var positions = [];56  for (var i=0; i<length; i++) {57  positions[i] = document.getElementById('GraphicSliderPositionItem-1-'+i);58  positions[i].val = i;59  positions[i].onclick = function(e) {60  page(this.val);61  };62  }63 64  arrow_right.onclick = function(e){65  position++;66  page(position);67  };68 69  arrow_left.onclick = function(e){70  position--;71  page(position);72  };73  74  var page = function(p) {75  position = (p+length) % length;76  roll.style.marginLeft = '-'+(100*(position+1))+'%';77  for (var i=0; i<length; i++) {78  if (i==position) {79  positions[i].className = 'GraphicSlider-position-item selected';80  } else {81  positions[i].className = 'GraphicSlider-position-item';82  }83  }84  };85  86  page(position);87 }88 89 90 91 92 93 var slider1 = new GraphicSlider(1);94 95 </script>96 97 98 99 
Enlace Duplicar


Este ShareCode tiene versiones:
  1. Graphic slider O ... (24/04/2013)
  2. Graphic slider O ... (24/04/2013)
  3. Graphic slider O ... (24/04/2013)
  4. Graphic slider O ... (24/04/2013)
Enlace
El enlace para compartir es: