[JavaScript] Simpler Image Switcher

Dieses Thema im Forum "Webentwicklung" wurde erstellt von dreamax, 22. Juli 2009 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 22. Juli 2009
    Simpler Image Switcher

    Hallo,
    ich bi ngerade dabei für eine Webseite einen Bilderswitcher zu machen. Ich habe so ein <div id="slide"> in dem per image tag ein Bild eingebunden werden soll. und zum anderen ein <div id="description"> in der per h2 und p tag ein titel und eine beschreibung stehen sollen. So das ganze soll man dann mit hilfe 2er pfeile durch switchen können so das man immer das jeweilige bild sieht und dazu in der anderen box den titel und die Beschreibung angezeigt kriegt. hört sich leicht an ist es wahrscheinlich auch aber ich bin nich gerade der crack in javascript. Wollte das ganze halt einfach mit hilfe von 3 arrays machen in denen halt jeweils imgurl titel und beschreibung drin ist.. Hier mal mein grundteil was aber irgendwie nich ganz so klappen will.. Bilder werden zwar irgendwie bisschen geswitcht aber nich dei beshcriebung udn der titel

    Code:
    <script type="text/javascript">
    var position=0;
    var image = new Array();
    var title = new Array();
    var text = new Array();
    image[1]='test_slide.jpg';
    image[2]='b';
    image[3]='c';
    title[1]='WGDH Messe / Hamburg';
    title[2]='b';
    title[3]='c';
    text[1]='Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /><br />Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincid';
    text[2]='b';
    text[3]='c';
    
    function slider(richtung){
     position = position + richtung;
     if(position > image.length - 1) position = 0;
     else if(position < 0) position = image.length - 1;
     document.getElementById('slide').innerHTML = '<img src="images/'+image[position]+'" alt=" " width="413" height="203" />';
     document.getElementById('description').innerHTML = '<h2>'+title[position]+'</h2><p>'+description[position]+'</p>';
    }
    </script>
     
  2. 22. Juli 2009
    AW: Simpler Image Switcher

    Code:
    var ImageSlide = {};
    ImageSlide.direction = -1; // 1 => von 0 bis n, -1 => von n bis 0
    ImageSlide.position = -1;
    ImageSlide.images = [];
    
    ImageSlide.images[0] = {
     src: 'bild1.png',
     title: 'Titel Bild1',
     text: 'Text Bild1'
    };
    
    ImageSlide.images[1] = {
     src: 'bild2.png',
     title: 'Titel Bild2',
     text: 'Text Bild2'
    };
    
    ImageSlide.images[2] = {
     src: 'bild3.png',
     title: 'Titel Bild3',
     text: 'Text Bild3'
    };
    
    (ImageSlide.compile = function() {
     ImageSlide.getNextImage = (ImageSlide.direction == -1) ? function() {
     return ImageSlide.images[((--ImageSlide.position < 0) 
     ? (ImageSlide.position = ImageSlide.images.length -1)
     : ImageSlide.position)];
     } : function() {
     return ImageSlide.images[((++ImageSlide.position >= ImageSlide.images.length)
     ? (ImageSlide.position = 0)
     : ImageSlide.position)];
     };
    })();
    
    ImageSlide.slide = function() {
     var next = ImageSlide.getNextImage();
     //alert(1);
     document.getElementById('slide').innerHTML = '<img src="images/' + next.src 
     + '" alt=" " width="413" height="203" />';
     document.getElementById('description').innerHTML = '<h2>' + next.title 
     + '</h2><p>' + next.text + '</p>';
    };
    
    ImageSlide.changeDirection = function(dir) {
     ImageSlide.direction = (dir == -1) ? -1 : 1;
     ImageSlide.compile();
    };
    
    ImageSlide.slideInterval = function(t) {
     var i = window.setInterval(function() {
     ImageSlide.slide();
     }, t);
     
     ImageSlide.slide();
     
     return { stop: function() { window.clearInterval(i); } };
    };
    HTML:
    <html>
     <head>
     <title>Bildwechsel</title>
     <script type="text/javascript" src="imageslide.js"></script>
     </head>
     <body onload="ImageSlide.slideInterval(2500);">
     <h1>Test</h1>
     <div id="slide"></div>
     <div id="description"></div>
     </body>
    </html>
     
  3. 23. Juli 2009
    AW: Simpler Image Switcher

    danke.. jedoch will ich ja mit hilfe von 2 pfeilen durch die bilder switchen und nich nach einem intervall..
     
  4. 23. Juli 2009
    AW: Simpler Image Switcher

    bedenke: arrays fangen immer bei 0 an!

    PHP:
    <! DOCTYPE html  PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html xmlns = "http://www.w3.org/1999/xhtml"  xml : lang = "de"  lang = "de" >
    <
    head >
    <
    title ></ title >
    <
    meta http - equiv = "Content-Type"  content = "text/html; charset=iso-8859-1"  />
    <
    script type = "text/javascript" >
    var 
    position = 0 ;
    var 
    image  = new Array();
    var 
    title  = new Array();
    var 
    text  = new Array();
    image [ 0 ]= 'test_slide.jpg' ;
    image [ 1 ]= 'b' ;
    image [ 2 ]= 'c' ;
    title [ 0 ]= 'WGDH Messe / Hamburg' ;
    title [ 1 ]= 'b' ;
    title [ 2 ]= 'c' ;
    text [ 0 ]= 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /><br />Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincid' ;
    text [ 1 ]= 'b' ;
    text [ 2 ]= 'c' ;

    function 
    slider ( richtung ){
        
    position  position  richtung ;
         if(
    position  image . length  1 position  0 ;
        else if(
    position  0 position  image . length  1 ;
        
    document . getElementById ( 'slide' ). innerHTML  '<img src="images/' + image [ position ]+ '" alt=" " width="413" height="203" />' ;
        
    document . getElementById ( 'description' ). innerHTML  '<h2>' + title [ position ]+ '</h2><p>' + text [ position ]+ '</p>' ;
        
    document . getElementById ( 'counter' ). innerHTML  = ( position + 1 )+ ' / ' +( image . length );
    }
    </
    script >
    </
    head >

    <
    body onload = "slider(0);" >



    <
    h1 > Test </ h1 >
    <
    div id = "slide" ></ div >
    <
    div id = "description" ></ div >

    <
    a href = "javascript:slider(-1)" > zurück </ a > < span id = "counter" ></ span > < a href = "javascript:slider(1)" > weiter </ a

    </
    body >
    </
    html >
     
  5. 23. Juli 2009
    AW: Simpler Image Switcher

    omg.. ja hab ich wohl im Eifer des Gefechts vergessen. so der Bilder durch lauf geht jetzt aber irgendwie ändert sich der Inhalt der <div id="description"> nicht.. Soll ja immer einfach titel und Beschreibung rein kommen als Beispiel so:
    HTML:
     <div id="description">
     <h2>WGDH Messe / Hamburg</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br /><br />
     Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincid</p>
     </div>
     
  6. 23. Juli 2009
    AW: Simpler Image Switcher

    HTML:
    <html>
     <head>
     <title>Bildwechsel</title>
     <script type="text/javascript">
     // <![CDATA[
     var ImageSlide = {};
     ImageSlide.position = 0;
     ImageSlide.images = [];
    
     ImageSlide.images[0] = {
     src: 'bild1.png',
     title: 'Titel Bild1',
     text: 'Text Bild1'
     };
    
     ImageSlide.images[1] = {
     src: 'bild2.png',
     title: 'Titel Bild2',
     text: 'Text Bild2'
     };
    
     ImageSlide.images[2] = {
     src: 'bild3.png',
     title: 'Titel Bild3',
     text: 'Text Bild3'
     };
    
     ImageSlide.getNextImage = function(dir) {
     ImageSlide.position += dir;
     var count = ImageSlide.images.length - 1;
     if(ImageSlide.position < 0) ImageSlide.position = count;
     else if(ImageSlide.position > count) ImageSlide.position = 0;
     
     return ImageSlide.images[ImageSlide.position];
     };
    
     ImageSlide.slide = function(dir) {
     var next = ImageSlide.getNextImage(dir);
     //alert(1);
     document.getElementById('slide').innerHTML = '<img src="images/' + next.src 
     + '" alt=" " width="413" height="203" />';
     document.getElementById('description').innerHTML = '<h2>' + next.title 
     + '</h2><p>' + next.text + '</p>';
     };
     
     ImageSlide.slideshow = function(dir, t) {
     var i = window.setInterval(function() {
     ImageSlide.slide(dir);
     }, t);
     
     ImageSlide.slide(0);
    
     return { stop: function() { window.clearInterval(i); } };
     };
     // ]]>
     </script>
     </head>
     <body onload="ImageSlide.slide(0);">
     <h1>Test</h1>
     <div id="slide"></div>
     <div id="description"></div>
     <div style="font-weight:bold;font-size:16px;font-family:verdana;">
     <a href="javascript:ImageSlide.slide(-1);void(0);">&laquo;</a>|
     <a href="javascript:ImageSlide.slide(1);void(0);">&raquo;</a>|
     <a href="#" onclick="if(ImageSlide.run) { ImageSlide.run.stop(); ImageSlide.run = false; this.firstChild.nodeValue = 'Slideshow starten'; } else { ImageSlide.run = ImageSlide.slideshow(1, 2500); this.firstChild.nodeValue = 'Slideshow beenden'; }">Slideshow starten</a>
     </div>
     </body>
    </html>
    mfg
     
  7. 24. Juli 2009
    AW: Simpler Image Switcher

    hab das script von Murdoc und mir getestet, läuft einwandfrei.
     
  8. 24. Juli 2009
    AW: Simpler Image Switcher

    okay danke euch beiden BWs sidn antürlcih raus
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.