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. Lechanski Wed, 30 Dec 2015 18:48

#51634

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

46 lines
2343 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 onload="slidingImages()">
        <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

#51635

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

54 lines
3087 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

#51636

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

11 lines
1331 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