Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    129
    Thanks
    11
    Thanked 0 Times in 0 Posts

    pure javascript image slider with onclick

    i am starting a new project and need help please
    i will have a varied number of game covers and will need to scroll left to right smoothly and when end image out of screen ad a new one at beginning.
    i am sure this one has been made before but i want to try and build one
    i am stuck on the part where it needs to remove the image when it reaches the end and then add a new image at the start
    i get the feeling i am going about this all wrong but could somebody tell me the best way to do this and dont say jquery

    Code:
    <head>
    <script>
    
        function updateimagesright(i)
        {
    		var positionofimage = document.getElementById("images").style.marginLeft;
    		
    		if(positionofimage.length==0){positionofimage = '0px';}
    		positionofimage = positionofimage.substring(0, positionofimage.length - 2)
    		 i = parseInt(positionofimage);
    		
    		i = i + 5;
    	
            var t = setTimeout(function () {
                document.getElementById("images").style.marginLeft = i + "px";
    
    
                if (i < 600) updateimagesright(i);
            },10);
        }
    
       function updateimagesleft(i)
        {
    		var positionofimage = document.getElementById("images").style.marginLeft;
    		
    		if(positionofimage.length==0){positionofimage = '0px';}
    		positionofimage = positionofimage.substring(0, positionofimage.length - 2)
    		 i = parseInt(positionofimage);
    		
    		i = i - 5;
    	
            var t = setTimeout(function () {
                document.getElementById("images").style.marginLeft = i + "px";
    
    
                if (i > -600 && i > 0) updateimagesleft(i);
            },10);
        }
    
    </script>
    </head>
    <body>
    
    <div style ="position:absolute;top:100px;left:50%;margin-left:-310px;border:5px solid black; width:620px; height:150px;">
    <div style="position:absolute; top:25px" id="images"   >
    <img src="images/1.jpg" width="100px">
    <img src="images/2.jpg" width="100px">
    <img src="images/3.jpg" width="100px">
    <img src="images/4.jpg" width="100px">
    <img src="images/5.jpg" width="100px">
    <img src="images/6.jpg" width="100px">
    </div></div><p>
    
    <center>
    <input type="button" value="    <<   " onclick="updateimagesright();">
    <input type="button" value="    >>   " onclick="updateimagesleft();">
    </center>
    
    
    </body>

  • #2
    Regular Coder
    Join Date
    Nov 2011
    Posts
    129
    Thanks
    11
    Thanked 0 Times in 0 Posts
    here is the running example
    http://kevs-gardening.co.uk


  •  

    Posting Permissions

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