Slider z podpisami

Thread View: pl.comp.lang.javascript

3 messages

[T] Back to Threads [V] Tree View [G] Group Articles

3 total messages Started by "Michal M. Lecha Wed, 30 Dec 2015 18:48

#50166

Author: "Michal M. Lecha
Date: Wed, 30 Dec 2015 18:48

45 lines
1376 bytes

Znalaz³em taki slider (http://snipplr.com/view/59060/):

    <html>
    <head>
        <title>Sliding Images</title>
        <script type="text/javascript">
            //Create images Array
            var imgArr = new Array("images/img1.jpg",
                        "images/img2.jpg",
                        "images/img3.jpg");

            var count = imgArr.length; // assign images array length
            var position = 0; //position is set to zero

            function slidingImages() {
                if ( document.images ) {
                    if ( position < count ) {
                        imageSrc(position); // call the image source
                        position += 1;
                    } else {
                        position = 0;
                        imageSrc(position);
                    }
                }
                setTimeout(slidingImages, 3000);
            }

            function imageSrc(position) {
                document.banner.src = imgArr[position];
            }
        </script>
    </head>
    <body >
        <img src="images/img1.jpg" name="banner"/>
    </body>
    </html>

Dla moich potrzeb jest niemal idealny - brak mu tylko mo¿liwo¶ci
wy¶wietlania podpisu pod poszczególnymi obrazkami.

Niestety nie potrafiê takiej funkcji sam dodaæ. Pomo¿ecie?
Z góry bardzo dziêkujê.

--
The Mis'

Re: Slider z podpisami

#50167

Author: zpksoft
Date: Thu, 31 Dec 2015 05:11

56 lines
1938 bytes

W dniu ¶roda, 30 grudnia 2015 19:48:19 UTC+1 u¿ytkownik Michal M. Lechanski napisa³:
> Znalaz³em taki slider (http://snipplr.com/view/59060/):
> 
>     <html>
>     <head>
>         <title>Sliding Images</title>
>         <script type="text/javascript">
>             //Create images Array
>             var imgArr = new Array("images/img1.jpg",
>                         "images/img2.jpg",
>                         "images/img3.jpg");
              var imgPodp = new Array("dcsdc", "ddddd", "xwxwsxwx");
> 
>             var count = imgArr.length; // assign images array length
>             var position = 0; //position is set to zero
> 
>             function slidingImages() {
>                 if ( document.images ) {
>                     if ( position < count ) {
>                         imageSrc(position); // call the image source
>                         position += 1;
>                     } else {
>                         position = 0;
>                         imageSrc(position);
>                     }
>                 }
>                 setTimeout(slidingImages, 3000);
>             }
> 
>             function imageSrc(position) {
>                 document.banner.src = imgArr[position];
                  document.getElementById('podp').innerHTML=podp[position];
>             }
>         </script>
>     </head>
>     <body onload="slidingImages()">
          <div id="podp"><div>
>         <img src="images/img1.jpg" name="banner"/>
>     </body>
>     </html>
> 
> Dla moich potrzeb jest niemal idealny - brak mu tylko mo¿liwo¶ci
> wy¶wietlania podpisu pod poszczególnymi obrazkami.
> 
> Niestety nie potrafiê takiej funkcji sam dodaæ. Pomo¿ecie?
> Z góry bardzo dziêkujê.
> 
> -- 
> The Mis'

Mo¿na oczywi¶cie bardziej elegancko (np. jedna tablica dwuwymiarowa).
(pisa³em bez testowania, mo¿e byæ literówka)

Pawe³

Re: Slider z podpisami

#50168

Author: "Michal M. Lecha
Date: Thu, 31 Dec 2015 19:31

10 lines
267 bytes

W dniu 31/12/2015 o 13:11, zpksoft pisze:

> Mo¿na oczywi¶cie bardziej elegancko (np. jedna tablica dwuwymiarowa).
> (pisa³em bez testowania, mo¿e byæ literówka)

Piêknie dziêkujê, po drobnej poprawce dzia³a jak z³oto.

Wszystkiego dobrego w Nowym Roku.

--
The Mis'

Thread Navigation

This is a paginated view of messages in the thread with full content displayed inline.

Messages are displayed in chronological order, with the original post highlighted in green.

Use pagination controls to navigate through all messages in large threads.

Back to All Threads