• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Autoslide aktivieren erst wenn ein Bild gedrückt wurde.

R

Roof3

Neues Mitglied
Servus Leute,


ich hab Internet einen Code für einen Slider gefunden welcher auch sehr gut funktioniert. Er hat auch eine Autoslide Funktion. Die ist eingentlich ganz gut aber ich möchte das die An und Abschaltbar ist.

Da des ein javascript ist und ich mich noch nicht so wirklich auskenne, wollte ich mal fragen was ich da für eine ein if abfrage brauch um das mit dem Bild OFF und ON zu verwirklichen.


Hier mal das javascript


JAVA:

Code: 
var imageCount = 1;
var total = 6;

function photo(x) {
    var image = document.getElementById('image');
    imageCount = imageCount + x;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "images/img" + imageCount +".jpg";
    }
 
window.setInterval(function photoA() {
    var image = document.getElementById('image');
    imageCount = imageCount + 1;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 
    image.src = "images/img"+ imageCount +".jpg";
    },5000);

HTML

HTML: 
<div id="autoslider">
                  
    <input type="image" id="abfrage_autoslide" src="pic/autoslide1.png" ></input>

</div>


Was muss ich bei dem setInterval Block alles abfragen das, das des nur aktiv ist wenn der User des auch will.


Ist des an auch irgendwie auch speicherbar, das wenn der User die seite wieder verlässt und am nächsten tag wieder kommt das es hald immer noch so ist was er gedrückt hat ?


Hoffe ihr könnt mir helfen.


Gruß

Roof3
 
Wie möchtest Du denn, dass der Benutzer das starten und stoppen soll? Mit einem Button?
Ja, man kann den Zustand speichern, und zwar in einem Cookie. Aber das gehört schon zu den fortgeschrittenen Techniken.
 
Zuletzt bearbeitet von einem Moderator:
Die autoslide Funktion sollte aus sein und man kann grade nur mit 2 anderen Buttons nach links und rechts swichten.

Ich hab da jetzt ein Bild, wenn dieses Bild gedrückt wird sollte die Autoslide Funktion angehen und erst wieder ausgehen wenn ich das Bild erneut drücke (Autoslide funktion aus)
 
Probier's mal so:
Code: 
var sliding = false;
function slideToggle() {
    if (sliding) sliding = false; else sliding = true;
}

window.setInterval(function photoA() {
    if (sliding) {
        var image = document.getElementById('image');
        imageCount = imageCount + 1;
        if(imageCount > total){imageCount = 1;}
        if(imageCount < 1){imageCount = total;}
        image.src = "images/img"+ imageCount +".jpg";
        }
    },5000);
HTML: 
<img src="dein_start_stop_button.jpg" onclick="slideToggle();">
 
Haha wie geil ist das den :). Funktioniert perfeekt . Isch des mit dene Cookies schwierig. Könnte ich mich da irgendwo einlesen wie des mit der Funktion speicher ? Das des gesetzt bleibt.


Dankeschön :)


-
Roof3
 
Du jetzt hätt ich noch was:

Und zwar: Der Slider zeigt mir 6 Bilder an (img1.jpg, img2.jpg... img6.jpg) Jetzt möchte ich aber für jedes Bild noch ein spezifisches Bild einbleden lassen (au indem ich auf ein Bild drücke so wie mit dem Autoslide on/off). Also ich möcht praktisch wenn im slider grad img2.jpg angezeigt wird und ich auf des on/off bild drücke das dann des spezifische Bild (z.B. overwrite2.jpg) angzeigt wird. Geht des ?


Hoffe es ist einigermaßen verständlich :rolleyes:


Gruß


Roof3
 
Sicher geht das. Soll denn das spezifische Bild nur angezeigt werden, solange die Maus gedrückt gehalten wird oder dauerhaft?
 
Des Bild sollte dauerhauft angezeigt werden bis ich des Bild hald wieder ausblenden will (Durch das Drücken von dem on und off Bild).
 
D. h. einmal drücken - neues Bild wird angezeigt, nochmal drücken - das ursprüngliche Bild wird wieder angezeigt?
 
Also des mit dem Slider bleibt ja so wie es gerade isch. Bild img1 - img6 bleibt so. Zu jedem Bild gibts jetzt aber ein sperates Bild(z.b overwrite1.jpg) was durch drücken von dem on/off Bild a/de/ktiviert wird.

Also im Klartext heißt des das beim Drücken vom on/off Bild Bei img1.jpg das Bild overwrite1.jpg angezeit wird und
bei img2.jpg overwrite2.jpg und bei img3.jpg overwrite3.jpg usw.. angezeigt wird.
 
Probier mal dieses:
Code: 
var sliding = false;
var extra = false;
function slideToggle() {
    if (sliding) sliding = false; else sliding = true;
}

function toggleExtra() {
    if (!sliding) {
        var image = document.getElementById('image');
        if (extra) {
            image.src = "images/img"+ imageCount +".jpg";
            extra = false;
        } else {
            image.src = "images/overwrite"+ imageCount +".jpg";
            extra = true;
        }
    }
}

window.setInterval(function photoA() {
    if (sliding) {
        var image = document.getElementById('image');
        imageCount = imageCount + 1;
        if(imageCount > total){imageCount = 1;}
        if(imageCount < 1){imageCount = total;}
        image.src = "images/img"+ imageCount +".jpg";
        }
    },5000);
Ich habe mal eine Abfrage eingebaut, so dass das Umschalten nur dann geht, wenn das automatische Sliden ausgeschaltet ist.
 
Erstmal danke für eine Mühe.


Das Grundprinzip funktioniert schon soo.. :)

Aber des Problem ist. Das das normale Bild (img1.jpg, img2.jpg..) trotz dem overwrite1.png 2 .. 3 angezeigt werden. (Den die overwrite Bilder haben einen transparenten Hintergrund deshalb sollen auch beide Bilder gleichzeitig angezeigt werden (Die Befinden sich dann später übereinander.)


Ich hab da selber mal ein bisschen rumprobiert.. aber es funktionier trotzdem nicht


Code: 
function toggleExtra() {
    if (!sliding) {
        var image = document.getElementById('image');
        if (extra) {
            image.src = "images/img"+ imageCount +".jpg";
            extra = false;
        } else {
            image.src = "images/img"+ imageCount +".jpg";
            image.src = "images/over/img"+ imageCount +".png";
            image.id = "b3"
            extra = true;
        }
    }
}


Have auch für die Overwrite bider eine classe im css file erstellt.

Code: 
#b3

{
    position:absolute;
    right:135px;
    top:75px;
    z-index:0;
   
}

Hoffe du kannst mir nochmal helfen.

Danke


Roof3
 
Ach so, jetzt verstehe ich es erst richtig. Wie Du das overwrite-Bild über das andere legst, weißt Du ja anscheinend. Dann würde ich es so machen:
Code: 
var sliding = false;
var extra = false;
function slideToggle() {
    if (sliding) sliding = false; else sliding = true;
}

function toggleExtra() {
        var overwrite = document.getElementById('b3');
        if (extra) { 
          overwrite.style.display ="none";
          extra = false;
        } else {
            overwrite.style.display ="inline";
            extra = true;
        }
    }
}

window.setInterval(function photoA() {
    if (sliding) {
        var image = document.getElementById('image');
        var overwrite = document.getElementById('b3');
        imageCount = imageCount + 1;
        if(imageCount > total){imageCount = 1;}
        if(imageCount < 1){imageCount = total;}
        image.src = "images/img"+ imageCount +".jpg";
        overwrite.src = "images/overwrite"+ imageCount +".jpg";
        }
    },5000);
d. h. das overwrite-Bild immer setzen und mit dem Button nur sichtbar und unsichtbar machen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben