ugrás a tartalomhoz

Felülről le csúszó carousel

perec12 · 2012. Feb. 1. (Sze), 14.17
http://www.fashiolista.com/
Ezen az oldalon van egy "slider" ami nagyon megtetszett! Az a neve, hogy carousel de google-ben nem találtam semmi ilyesmit.Mind olyan volt ami jobbról balra és balról jobbra csúszik, nem pedig fel és le.Hogy tudnék ilyet készíteni? vagy legalább valami pontos nevet adjatok amint el tudok indulni. :)
‹ IE 6 - absolute DIV AJAX form post ›
 ■
1

jquery-plugins.hu, itt van

Hidvégi Gábor · 2012. Feb. 1. (Sze), 14.40
jquery-plugins.hu, itt van egy rakat hasonló script.
2

----

Trudy · 2012. Feb. 1. (Sze), 14.41
Kicsit kellett volna turkálni a a forráskódban :
Ez lesz az
4

Ez nem az

perec12 · 2012. Feb. 1. (Sze), 16.01
Ez nem az
3

Minimális megvalósítás

Poetro · 2012. Feb. 1. (Sze), 15.15
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">
    body {
      width: 500px;
      margin: 0 auto;
    }
    #menu {
      float: right;
      width: 20%;
      height: 200px;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #000;
    }
    #menu li {
      list-style-type: none;
      background: #ddd;
      height: 25%;
      margin: 0;
    }
    #menu a {
      padding: 10px;
      display: block;
      border-top: 1px solid #000;
    }
    #items-container {
      position: relative;
      height: 200px;
      overflow: hidden;
      background: #eee;
      border-right: 1px solid #000;
    }
    #items {
      margin: 0;
      padding: 0;
      position: relative;
      top: 0;
    }
    #items li {
      list-style-type: none;
      margin: 0;
      height: 200px;
      padding: 0 20px;
      line-height: 200px;
    }
  </style>
</head>
<body>
<ul id="menu">
  <li><a href="#item-1">Item 1</a></li>
  <li><a href="#item-2">Item 2</a></li>
  <li><a href="#item-3">Item 3</a></li>
  <li><a href="#item-4">Item 4</a></li>
</ul>
<div id="items-container">
  <ul id="items">
    <li id="item-1">Content 1</li>
    <li id="item-2">Content 2</li>
    <li id="item-3">Content 3</li>
    <li id="item-4">Content 4</li>
  </ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
(function ($) {
  var items = $('#items'),
      index = 0,
      timeout;

  /**
   * Továbbítás a következő elemhez.
   */
  function autoForward() {
    var children = items.children();

    index = index === children.length - 1 ? 0 : index + 1;
    animate(children.eq(index));
  }

  /**
   * Indítjuk a következő elemhez ugrást.
   */
  function startTimer() {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(autoForward, 5000);
  }

  /**
   * Animáljuk a dobozt a megadott elemhez.
   */
  function animate(item) {
    if (timeout) {
      clearTimeout(timeout);
    }
    items.stop(true).animate({top: -item.position().top}, 'slow', startTimer);
  }

  /**
   * Kezeljük a menüre kattintást.
   */
  $('#menu').find('a').click(function () {
    var link = $(this),
        hash = link.attr('href').replace(/^.*#/, '#'),
        item = $(hash);

    index = item.index();
    animate(item);
    return false;
  });

  startTimer();
}(jQuery));
</script>
</body>
</html>
Kipróbálható.
5

Köszönöm, ez segített :)

perec12 · 2012. Feb. 1. (Sze), 16.03
Köszönöm, ez segített :)