ugrás a tartalomhoz

Egyszerű slideshow

sEEcher · 2011. Júl. 16. (Szo), 16.09
Sziasztok!

A segítségeteket szeretném kérni. Nem vagyok valami gyakorlott javascript programozó, így a következő probléma megoldása már túl nagy falat nekem. Egy egyszerű slideshow-t kellene kivitelezni (még fade sem szükséges) 3 div-re alkalmazva úgy, hogy ha a 3 divet összefogó div fölé viszem az egeret, a divek váltogatása leálljon, majd ha elvittem onnan az egeret, folytatódjon.

Nagyon megköszönném, ha segítenétek!
‹ Igazítás html-ben IOS6 CSS megjelenítés probléma ›
 ■
1

Példák

Poetro · 2011. Júl. 16. (Szo), 16.59
Amennyiben nem vagy hajlandó JavaScript-et tanulni, itt egy lista elég jó slideshowkkal.
2

...

sEEcher · 2011. Júl. 16. (Szo), 17.10
Nem a hajlandóságról van szó, csupán nincs időm, sem energiám elsajátítani és tapasztalatokat szerezni egy olyan nyelvben, amire két jégkorszak között egyszer van szükségem, ráadásul akkor is az alap tudásomat és egy kis segítséget felhasználva megoldom a problémát.
3

Furcsa

Poetro · 2011. Júl. 16. (Szo), 18.10
Furcsa, hogy nincs igény JavaScript-re, pedig szinte minden oldalon van valamilyen JavaScriptes dolog. De hogy lásd, mennyire egyszerű, 10 perc alatt csináltam neked egy nagyszerűen működő kis alkalmazást - jQuery használatával.
<!DOCTYPE html>
<html>
<head>
  <title>Slideshow</title>
  <style type="text/css">
    .slide {
      display: none;
    }
    #slideshow .active {
      display: block;
    }
  </style>
</head>
<body>
  <div id="slideshow">
    <div class="slide active"><img src="http://placehold.it/350x150&text=1.+slide" alt="1. slide" /></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=2.+slide" alt="2. slide" /></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=3.+slide" alt="3. slide" /></div>
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
    jQuery(function ($) {
      var timeout
        , current = 0
        , container = $('#slideshow')
        , slides = container.find('.slide');

      /**
       * Indul a slideshow.
       */
      function start() {
        timeout = window.setTimeout(showNext, 3000);
      }

      /**
       * Következő kép mutatása.
       */
      function showNext() {
        slides.eq(current).removeClass('active');
        current += 1;
        if (current >= slides.length) {
          current = 0;
        }
        slides.eq(current).addClass('active');
        start();
      }

      container.mouseenter(function () {
        clearTimeout(timeout)
      }).mouseleave(function () {
        start();
      });

      start();
    });
  </script>
</body>
</html>
4

...

sEEcher · 2011. Júl. 16. (Szo), 20.37
Köszönöm szépen a segítséget. Úgy látszik, jó nyomon jártam, ugyanis csak néhány (de életmentő) sorral kellett kiegészítenem a saját kódomat. Köszi még egyszer!
5

link

wineman · 2012. Okt. 1. (H), 20.58
Hogyan tudok ebben a slideshow-ban a képere linket tenni?
6

HTML

Poetro · 2012. Okt. 1. (H), 21.05
Ahogy bármilyen más HTML elemre tennél linket.