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

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.

//var img = el.querySelectorAll("img");
var img = el.querySelectorAll("div");

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

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>

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

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

… je mozne … ?
Ano, je to mozne. 

dekuji, ano, je :-)