Zmena obrazku v divu – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Zmena obrazku v divu – JavaScript, AJAX, jQuery – Fórum – Programujte.comZmena obrazku v divu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Toto vlákno bylo označeno za vyřešené.
zak0
Newbie
17. 3. 2019   #1
-
0
-

Ahoj,

nasel jsem na webu js pro jednoduchou zmenu vice obrazku v jednom div:

 

// http://kod.djpw.cz/rzib
(function(el, time) {
    var timer;
    var active = 0;
    var img = el.querySelectorAll("img");
    var imgCount = img.length;
    
    function change() {
        img[active].className = "";
      
        if (active == (imgCount - 1)) {
            active = 0;
        }
        else {
            active = active + 1;
        }
        img[active].className = "show";
    }
    
    timer = setInterval(change, time);
    
    el.onmouseover = function() {
        clearInterval(timer);
        img[active].className = "show stoped rucicka";
    };
    el.onmouseout = function() {
        timer = setInterval(change, time);
    };    
    el.onclick = change;
})

prislusne html vypada takto

<div class="slideshow">

<!-- první obrázek -->
        
    <img src="0.jpg" class="show" title="0" />

    <img src="1.jpg" title="1" />
    
    <img src="2.jpg" title="2" />
    
    <img src="3.jpg" title="3" />

    
</div>


Potreboval bych ten js modifikovat aby obrazky byly zaroven odkazem, rad bych pouzil tuhle konstrukci

<div class="slideshow">

<!-- první obrázek -->
        
    <div class="show"><a href="/"><img src="0.jpg" class="show" title="0" /></a></div>

    <div><a href="/"><img src="1.jpg" title="1" /></a></div>
    
    <div><a href="/"><img src="2.jpg" title="2" /></a></div>

</div>


Idealni by bylo aby zustala zachovana funkce prolinani obrazku. Poradite mi prosim jak upravit js?

Je take mozne, ze mnou zvolena stavba html je nevhodna a nepujde to. Zkousel jsem ruzne varianty js ale me se to nepodarilo rozchodit ... s js jsem na tom opravdu bidne :-(

Dekuji.

Nahlásit jako SPAM
IP: 31.30.86.–
peter
~ Anonymní uživatel
3474 příspěvků
18. 3. 2019   #2
-
0
-

   

//var img = el.querySelectorAll("img");
var img = el.querySelectorAll("div");
Nahlásit jako SPAM
IP: 2001:718:2601:258:1c1e:b2d7:6fc6:3e0b...–
zak0
Newbie
18. 3. 2019   #3
-
0
-

#2 peter
Diky za snahu ale tohle nefunguje. Zkousel jsem to ...

Nahlásit jako SPAM
IP: 31.30.12.–
peter
~ Anonymní uživatel
3474 příspěvků
18. 3. 2019   #4
-
0
-

A tvuj opraveny kod k otestovani, cely, vypada jak? Nejake kousicky polofunkcniho cehosi tady nikdo resit nebude. A slozite kody take ne. Takze jednoduchy funkcni kod je?

<style>
.slideshow {border:2px solid #090; width:450px;}
.slideshow div {display:none; border:2px solid #090; width:450px;}
.slideshow div.show {display:block;}
</style>

<div class="slideshow">

<!-- první obrázek -->
        
    <div class="show"><a href="/"><img src="0.jpg" class="show" title="0" /></a></div>

    <div><a href="/"><img src="1.jpg" title="1" /></a></div>
    
    <div><a href="/"><img src="2.jpg" title="2" /></a></div>

</div>


<script>
var timer, sl, xxx;	// tohle jsem presunul mimo funkci a pridal sl a xxx
xxx = function(el, time) {
    var active = 0;
//    var img = el.querySelectorAll("img");
    var img = el.querySelectorAll("div");
    var imgCount = img.length;
    
    function change() {
        img[active].className = "";
      
        if (active == (imgCount - 1)) {
            active = 0;
        }
        else {
            active = active + 1;
        }
        img[active].className = "show";
    }
    
    
    el.onmouseover = function() {
        clearInterval(timer);
        img[active].className = "show stoped rucicka";
    };
    el.onmouseout = function() {
        timer = setInterval(change, time);
    };    
    el.onclick = change;

    timer = setInterval(change, time);	// presunul jsem timer na konec
}

sl = document.querySelector("div.slideshow");
xxx(sl, 300);
</script>
Nahlásit jako SPAM
IP: 2001:718:2601:258:1c1e:b2d7:6fc6:3e0b...–
zak0
Newbie
18. 3. 2019   #5
-
0
-

Dky za pomoc a priklad, me vubec neseplo ze musim upravit take CSS   

Nahlásit jako SPAM
IP: 31.30.12.–
zak0
Newbie
18. 3. 2019   #6
-
0
-

Tak jeste jeden poddotaz ... je mozne aby se ty obrazky plynule prolinaly nebo je to v pripade prepinani divu neproveditelne?

Nahlásit jako SPAM
IP: 31.30.12.–
peter
~ Anonymní uživatel
3474 příspěvků
19. 3. 2019   #7
-
0
-

… je mozne … ?
Ano, je to mozne. 

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:3838:5a25:f2e0...–
zak0
Newbie
20. 3. 2019   #8
-
0
-

dekuji, ano, je :-)

Nahlásit jako SPAM
IP: 31.30.86.–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 24 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý