SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slider imgage vertically like flash effects

    Hi.
    I'm trying to implement a script
    that slide images vertically like Flash.
    I don't know what's the really name
    of the effetct so if you also give me
    a clue to googling.

    I manage this script it is not so bad
    but ....
    (Images dimension H. 100px W. 100px)
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    style type="text/css">
    * {
        
    margin:0px;
        
    padding:0px
    }
    body 
        
    text-align:center
        
    margin:20px 0px
        
    background-color:#F5F6F0;
    }
    a:linka:visited,a:hover,a:active {
        
    text-decorationnone
    }
    img{
         
    border:0px solid #000000; 
    }
    ul {
        list-
    style-type:none;
    }
    div#container { 
        
    margin:0px auto;
        
    text-align:left;
        
    width:500px;
    }
    ul#slider{ 
        
    position:relative
    }
    </
    style>
    <
    script type="text/JavaScript">
    function 
    slider(){
        
    // All the images have got a 100px height
        // I fixed it to 110 to put just a little of 'air'
        // between them ;)
        
    var ImageDimension110;
        var 
    step10;
        var 
    targetdocument.getElementById('slider');
        var 
    imgstarget.getElementsByTagName('img');
        var 
    timeoutID window.setInterval(f500);
        function 
    f(){  
            if(
    step<=ImageDimension){
                for(var 
    i=1lenimgs.length;ilen;i++){
                    
    imgs.item(i).style.position'absolute';
                    
    imgs.item(i).style.top= (i*step) + 'px';
                    
    //alert(imgs.item(i).style.top);
                
    }
                
    stepstep+10;
            }
            else {
                
    window.clearTimeout(timeoutID);
            }
        }
    }
    window.onload=function(){
        
    slider();
    }
    </script>

    </head>

    <body>
    <div id="container">
    <ul id="slider">
    <li><a href="#"><img src="img1.jpg" /></a></li>
    <li><a href="#"><img src="img2.jpg" /></a></li>
    <li><a href="#"><img src="img3.jpg" /></a></li>
    <li><a href="#"><img src="img4.jpg" /></a></li>
    <li><a href="#"><img src="img5.jpg" /></a></li>
    </ul>
    </div>
    </body>
    </html> 
    Any way on how I should be doing this better would be gratefully appreciated.

    DEMO
    http://www.blogial.net/test/slider/
    Bye.

  2. #2
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've changed the frequency and
    added this simple css rule


    PHP Code:
    ul#slider img{ position:absolute; top:0px;} 
    and it works far better


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •