ImageSlider

finneding · 20 April 2013

Hallo liebe Community.
Meine Javascriptkenntnisse sind quasi nicht vorhanden, kann also sein, dass meine fehler dumm sind. ich wollte meinen image slider, der über die css-transition funktioniert mit javascript automatisieren, was aber leider nicht funktioniert. hier der code:

HTML:

<html>
    <head>
<link rel = "stylesheet" type = "text/css" href = "imageslider.css">
    </head>
    <body>
        <script type = "text/javscript">
        <!--
            var i = 1;
            for(var i < 5; i < 5; i++)
                window.location = "#image" + i;
                window.setTimeout(2000);
            if(i = 4)
                for(i > 1; i > 1; i--)
                window.location = "#image" + i;
                window.setTimeout(2000);
        -->
        </script>
        <div id="images">
            <img id="image1" src="http://i.imgur.com/dL3io.jpg" />
            <img id="image2" src="http://i.imgur.com/qASVX.jpg" />
            <img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
            <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
        </div>
        <div id="slider">
            <a href="#image1">1</a>
            <a href="#image2">2</a>
            <a href="#image3">3</a>
            <a href="#image4">4</a>
        </div>
    </body>
</html>

imageslider.css:

Code:

body {
    text-align: center;
}
#images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;
    
    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 250px;
    
    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 0;
    
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
    opacity: 1;
}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider a:hover {
    background: #C6E4F2;
}

Tronjer · 20 April 2013

An dem JS stimmt so ziemlich gar nichts. ;)

Du solltest dich bei deinem Slider entweder für CSS3 oder jQuery entscheiden. Für beides gibt es genügend Skripte im Netz zum Download.

finneding · 21 April 2013

Danke für die antwort.
Ich wollte das eigentlich ohne irgendwelche jquery-plugins machen bzw. ohne irgendwelche skripte runterzuladen.
gibt es keine möglichkeit das irgendwie so zu machen, dass der slider selber in css gemacht ist
und ich nach jeden 2sekunden oder so den target auf ein anderes img ändere?

ich habe jetzt noch ein bisschen was geändert:
ich habe diese zeile eingefügt:

HTML:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

und mein javascript sieht jetzt so aus:

Code:

		<script type = "text/javscript">
			var i = 1;
			for(i < 4; i < 4; i++){
				$("#images img:nth-child("i")").css("left", "0");
				$("#images img:nth-child("i")").css("opacity", "1");
				$("#images img:nth-child("i")").css("z-index", "9");
				window.setTimeout(2000);
			}
			if(i = 4) {
				for(i > 1; i > 1; i--) {
				$("#images img:nth-child("i")").css("left", "0");
				$("#images img:nth-child("i")").css("opacity", "1");
				$("#images img:nth-child("i")").css("z-index", "9");
				window.setTimeout(2000);
				}
			}
		</script>

aber es geht leider immernoch nicht

ImageSlider

finneding

Neues Mitglied

Tronjer

Senior HTML'ler

finneding

Neues Mitglied

Neueste Beiträge