slideShow Java

[pajacz17]

Ahoj, mám prosím tento java script a obrázky se nezobrazují postupně, ale jdou všelijak na přeskáčku. Umí prosím někdo upravit zápis java scriptu, aby šly postupně? Děkuji

function slideShow() {
var $active = $('#gallery img.active');
if ( $active.length == 0 ) $active = $('#gallery img:last');

var $next = $active.next().length ? $active.next()
: $('#gallery img:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1500, function() {
$active.removeClass('active last-active');
});
}

$(document).ready(function() {
setInterval( "slideShow()", 8000 );
});

[Reklama]

[CZechBoY]

Čau,
mně to jde popořadě... Pošli HTML.

*Pokud si tam dodáš ještě kod na zprůhlednění tak se zobrazuje jen jeden obrázek
http://jsfiddle.net/7ka2L9jx/

[pajacz17]

kód je následující pro css

#gallery {
position: relative;
height:156px;
width: 385px;
float: right;
margin: 0 0 0 0;
}

#gallery IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 156px;
}

#gallery IMG.active {
z-index:10;
opacity:1.0;
}

#gallery IMG.last-active {
z-index:9;
}

a pro html

<div id="gallery">
<img src="/img/stavby_na_klic1.jpg" alt="stavby na klíč Pardubice" title="stavby na klíč Pardubice" class="active" />
<img src="/img/pasivni_domy1.jpg" alt="pasivní domy Pardubice" title="pasivni domy Pardubice" />
<img src="/img/prodej_montaz_oken.jpg" alt="prodej a montáž oken Pardubice" title="prodej a montáž oken Pardubice" />
<img src="/img/prodej_montaz_dveri.jpg" alt="prodej a montáž dveří Pardubice" title="prodej a montáž dveří Pardubice" />
<img src="/img/inzenyrske_cinnosti.jpg" alt="inženýrské činnosti Pardubice" title="inženýrské činnosti Pardubice" />
<img src="/img/stavebniny.jpg" alt="stavebniny Pardubice" title="stavebniny Pardubice" />
<img src="/img/stavby_na_klic1.jpg" alt="stavby na klíč Pardubice" title="stavby na klíč Pardubice" />
<img src="/img/pasivni_domy1.jpg" alt="pasivní domy Pardubice" title="pasivni domy Pardubice" />
<img src="/img/prodej_montaz_oken.jpg" alt="prodej a montáž oken Pardubice" title="prodej a montáž oken Pardubice" />
<img src="/img/prodej_montaz_dveri.jpg" alt="prodej a montáž dveří Pardubice" title="prodej a montáž dveří Pardubice" />
<img src="/img/inzenyrske_cinnosti.jpg" alt="inženýrské činnosti Pardubice" title="inženýrské činnosti Pardubice" />
<img src="/img/stavebniny.jpg" alt="stavebniny Pardubice" title="stavebniny Pardubice" />
</div>

Vždy když se to mění, tak chvilku v přěměně vidím jiný obrázek, ale to bude asi tím, že vždy to začně u active a zobrazuje poté jenom liché řádky. Když to dojede, tak opakování již probíhá bez obrázku v třídě active.

Můžete prosím poradit co mám špatně, aby se to zobrazovalo správně? Děkuji

Jinak děkuji za odkaz na http://jsfiddle.net/7ka2L9jx/ , to neznám a je to perfektní. Jinak tam to opravdu chodí, takže budu mít asi blbě css , jsem y toho zmatený.

[CZechBoY]

No, pořád je chyba v JS
Myslím, že chceš, aby to fungovalo nějak takto: http://jsfiddle.net/ytqsg7n1/

Kód: Vybrat vše

function slideShow() {
    var $active = $('#gallery img.active');
    if ( $active.length == 0 )
        $active = $('#gallery img:last');
    
    var $next = $active.next().length ? $active.next() : $('#gallery img:first');
    
    $active.addClass('last-active');
    
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1500);
        
    $active.animate({opacity: 0.0}, 1500)
        .removeClass('active last-active');
}

$(document).ready(function() {
    setInterval( "slideShow()", 2000 );
});
 

[pajacz17]

Děkuji za snahu. Ano přesně tak bych chtěl, ale když js zkopíruji do prohlížeče, tak to mění pouze 3 obrázky a to: stavební činnost, okna a inženýrské činnosti. Vždy v mezi přechodu jsou vidět asi ty sudé obrázky. Vůbec tomu nerozumím proč.

[CZechBoY]

Ale na tom jsfiddle to jde jak má ne?
Možná bude problém někde na tom tvým webu než v kodu, který posíláš.

[pajacz17]

Jo, tam to funguje. Mám udělaný banner.html , který přes php include načítám do index.php. Co by tomu mohlo vadit? Myslíte, že je chyba úplně jinde v souboru banner.html?

[CZechBoY]

Někde tam bude chyba... Můžeš vložit vygenerovanej html kod někam? Sem na forum třeba

[pajacz17]

Tak tady je html kód

Kód: Vybrat vše

<link href="/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/css/coin-slider.css" />
    <link rel="shortcut icon" href="favicon.ico" />
   
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/prechod2.js"></script>
  </head>
         
  <body>
 
  <!-- Banner -->
  <?php
  include"/inc/banner_page.html";
  ?>
 
  <div id="page_content">
 
  <!-- Banner -->
  <?php
  include"/inc/banner_home.html";
  ?>
 
  <!-- Left_menu -->
  <?php
  include"/inc/left_menu.html";
  ?>
 
  <!-- News -->
  <?php
  include"/inc/aktuality.html";
  ?>
 
  <div id="content_smaller">
    <h1 class="small">Vítáme Vás na stránkách xxxx <em> xxxxx.</em></h1>
    <br />
    <br />
    <p>Na našich stránkách se můžete seznámit se službami, které naše firma nabízí a prohlédnout si reference staveb, které jsme s úspěchem realizovali.
    Realizovali jsme stovky zakázek pro soukromé i veřejné investory po celé naší zemi. Na námi poskytované práce umíme poskytnout nadstandardní záruky.</p>
    <br />
    <p>Provádíme všechny <em>stavební práce</em> od rekonstrukcí, <em>realizací domů na klíč</em>, ale také doplňkové služby
    jako jsou <em>dodávky a montáže oken,dveří</em>, či prodej <em>stavebního materiálů</em>. Samozřejmostí jsou <em>inženýrské činnosti.</em></p>
    <br />
    <p>Naše firma je v seznamu odborných dodavatelů v programu Zelená úsporám a také patří mezi doporučené prováděcí firmy projektu SENUB (= Systémy energeticky úsporných budov).</p>
    <br />
    <p>Našimi klienty jslou lidé, kteří mají zájem o kvalitně odvedenou práci bez kompromisů s pověstí spolehlivého partnera na českém trhu stavebních prací a dodávek materiálů.</p>
    <br /><br />
  <span>
  <img src="/img/picture1.png" alt="reference staveb" title="reference staveb" height="174" width="200">
  <img src="/img/picture2.png" alt="reference staveb" title="reference staveb" height="174" width="200">
  </span>
  <br /><br />
 
  <span class="odkazy_ss">
      <a href="https://www.facebook.com/xx7"><img src="/img/facebook.png" width="60" alt="logo facebook" title="xxx. na facebooku" /></a>
      <a href="https://twitter.com/xxxDUBICE"><img src="/img/twitter.png" width="60" alt="logo twitter" title= xxx na twitteru" /></a>
      <a href="https://www.youtube.com/watcxxxxdOnwJIM"><img src="/img/youtube.png" width="60" alt="logo youtube" title="xxx na youtube" /></a>
      <a href="https://plus.google.com/116312570621xxx36587/al=US&hl=cs"><img src="/img/google+.png" width="60" alt="logo google+" title="xxxx na google+" /></a>
  </span>
   
  </div>
  </div>
 
  <!-- Footer -->
  <?php
  include"/inc/footer.html";
  ?>
 
 
 
 
 
  </body>

a tady banner

Kód: Vybrat vše

 <!-- Banner page-->

<div id="banner_page">
  <div class="banner">
  <div class="logo_xxx"> 
  <img src="/img/lxxxx.png" alt="logo xxxx" title="logo xxxx." height="90" width="230" />
  </div> 
 
  <ul id="menu">
          <li class="current"><a href="index.php">Domů</a></li>
          <li><a href="vizualizace.php">O nás</a></li>
          <li><a href="kontakt.php">Aktuality & Kariéra</a></li>
          <li><a href="kde_nas_najdete.php">Kontakt</a></li>
        </ul>   
  </div>
 
  </div>

Děkuji